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“Being good at math and artis like a celery + mango smoothie 
drink. They don’t seem to go together well. It sounds a bit 
healthy while feeling a bit absurd. | find it rather fun to imagine 
all the celery + mango creators out there who have sat at 
the odd intersection of math(s) and (the) art(s). It’s a tiny percen- 
tage of humankind. The internet has made it feel a little 
bigger. It’s getting a bit more profitable for some. And it’s also 
made Zero impact for others. This whole digital transforma- 
tion is real. And there are those who get to become butterflies. 
But many get stuck in the chrysalis stage. It’s because the 
way art is taught runs counter to the computational medium. 
Anew kind of math-y set of skills are required—which are 
deemed as foreign. Luckily the world has had Processing. It 
lives in that “Goldilocks” state of not too math-y, not too 
art-y. It’s the soft space for the celery + mango people who 
seek to invent a medium together. It’s a community that 
has grown beyond my scale of what is possible. Congratula- 
tions, Processing!” John Maeda, 2021. 


In August 2021, we celebrated the 20th anniversary of the first 
release of the Processing software, “Release 0001 — built 
9 August 2001 in Japan, 6:01:26pm (5am Eastern).” The idea 
for the Processing Community Catalog which you are now 
reading emerged while planning this anniversary. We announc- 
ed the catalog with this short note: 
What does being a part of the Processing community 
mean to you? We're creating a community catalog 
to celebrate all we’ve done together with Processing for 
the last 20 years! We hope you will consider contri- 
buting a page that represents how you've been a part of 
the community. You can share art you've made, code 
you've written, an event you organized, a workshop you 
taught, or anything else! Your page can be anything— 
asketch, some writing, a photo, a screenshot, a collage, 
a poster, a mini-zine, etc! ... We're excited to see what 
you share, and please share this call with your friends. 
In addition to the hundreds of pages created by the com- 
munity and presented here, we've also included documenta- 
tion of the activities of Processing, p5.js, and the Proces- 
sing Foundation over the past 20 years. The community and 
work around these projects extend far beyond what 
could be included in one publication, but we hope this cata- 
log offers a window into our collective, ongoing, and 
evolving process. 
Here’s to 20 more years together! 
Lauren, Casey, Qiangian, Ben, Cassie, Dan, Dorothy, evelyn, 
Johanna, Kate, Toni, and Saber 


At our core is the philosophy and politics of FLOSS (Free, Libre, 
Open Source Software.) We see software as a medium, 
something that connects two things. We view it as a means for 
thinking and making. We believe it should be free. We be- 

lieve that learning to program is not about acquiring a certain 
Skillset, but is instead a creative and exploratory process. 

We believe software, and the tools to learn it, should be acces- 
sible to everyone. We believe software literacy and an 
understanding of media of all kinds is essential knowledge 

for today. 
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The history of Processing is many different things to different ORA 001 AnOral History of Processing, 2021, Liz Stinson. 
people. Casey Reas, Ben Fry, Daniel Shiffman, Johanna 

Hedva, Saber Khan, Lauren Lee McCarthy, Dorothy R. Santos, 

evelyn masso, Cassie Tarakajian, and Qianqian Ye reflect- 

ed on what it meant to them in this conversation that was wov- 

en together and edited by Liz Stinson for AIGA Eye On 

Design in November 2021. 
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ORA AnOralHistory of Processing, 2021, 

001 —_LizStinson. 

Computers and design have long been intertwined. This relationship dates back to the 
1960s, when computational pioneers used code to create novel forms. Since then, 
programming’s grip on designers has only tightened, even as it’s been obscured by the 
user-friendly interfaces of modern creativity software. 

The bridge between technology, design, and art has always been in the explora- 
tion of tools, and how those tools enable code to become a medium for new forms 
of expression. In the late 1990s, this dynamic was at play at the Massachusetts Institute 
of Technology (MIT), in a lab called the Aesthetics + Computation Group (ACG). 

Started by John Maeda, the ACG was an update to and continuation of the Visible Lan- 
guage Workshop, a research group founded by Muriel Cooper (https://eyeondes 
ign.aiga.org/muriel-coopers-visions-of-a-future/) in 1975 that explored how compu- 
tation could be used in the field of graphic design. 

Cooper was concerned with how computers could be leveraged to expand the 
notion of traditional publication design and its accompanying elements, like typo- 
graphy. When Maeda joined the Media Lab in 1996, he pushed at the edges of Cooper’s 
work, exploring what code could enable formally, inthe contexts of both art and design. 

Cooper and Maeda established along lineage of designers and artists who were 
interested in pushing the boundaries of what code could create. Among them were 
Ben Fry (https://benfry.com/) and Casey Reas (https://reas.com/), two research assistants 
in Maeda’s group. During their time at MIT, Fry and Reas began to question how pro- 
gramming was taught to visually minded students. They wondered: How could they make 
programming more accessible to designers and artists? And what would it look 
like for code to become both a creative medium and part of the creative process itself? 

In the early 2000s, Fry and Reas started building a piece of software that 
would let people code in a simplified environment using a variation of the Java language. 
The software, called Processing (https://processing.org/), was designed as a digital 
sketchbook where novice and experienced coders alike could create interactive graph- 
ics. Processing was more than a tool, though. It was acommunity—one that would 
eventually be built by thousands of people who have contributed code to the open-source 
environment over the last 20 years. 

What started in 2001 as a side project has since become a worldwide environ- 
ment used by thousands of people to explore the creative possibilities of coding. 

Here is the story of Processing, in the words of the people who created it. 
Casey Reas, Co-Founder of Processing, artist (https://reas.com/), 
Professor in the Department of Design Media Arts at UCLA. 
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Ben Fry, Co-Founder of Processing, Founder of Fathom (https://fathom. 
info/) Design Studio. 
Dan Shiffman, Associate Arts Professor at New York University’s Interac- 
tive Telecommunications Program. 
| don’t think Processing would exist without John Maeda. The story starts there. 
Ben and | both came to MIT to study with John specifically because he was 
bridging ideas of computer science and together. At that time, he was the per- 
son who was making those connections, and that’s what Ben and | were 
both interested in. We were both John’s research assistants in the Aesthetics + 
Computation Group, where we were working with John on Design By Num- 
bers (https://mitpress.mit.edu/books/design-numbers) (DBN), which was a pro- 
gramming language and environment and system to teach designers the 
basics of coding. 
DBN was under-featured, and intentionally so. Like, can you have a pro- 
gramming language that’s eight different commands and a limited screen of 100 
x 100 pixels, and only grayscale? It was a super-minimal environment that 
was meant to just get people thinking about using computation at all. 
| remember there were a few moments that were really pivotal around teaching 
DBN. One was at the AIGA headquarters [in 1999]. We did a workshop for de- 
signers—nontraditional students of all different experience levels. Ben, Elise Co 
(http://www.artcenter.edu/interaction/faculty/elise-co/), and | also taught a 
few-day workshop at RISD. Those workshops really opened my eyes. We could sit 
with a group of people who had never coded before—people who were design- 
ers—and within an hour, they were making stuff. But at the same time, there were 
also these questions of like, “Oh, | want to use color”; “Oh, | wantit to be bigger 
than 100 x 100 pixels.” And that was really the start of what Processing became. 
Casey and | had kept making an experimental version of DBN that looked the 
same but underneath you could do OpenGL and 3D graphics and all these other, 
much more complicated things. There were secret commands to make it a 
larger drawing canvas or add color or switch over into using Python instead of the 
DBN language. We had all these odd variants that we would hack in as things 
to try out. But in the end, we didn’t want to mess with DBN. There was something 
really wonderful about its simplicity, and there wasn’t a good way to have 
DBN ladder up into something more complicated. 
Processing tried to take the minimal aspects of DBN but also allow it to extend to 
the point where it was no longer purely a learning environment, but actually 
a full design and studio environment. 
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What we were after was: Can we take what is so nice about DBN where you write 
alittle bit of code, hit “run,” and something happens, and can we make some- 
thing that’s more sophisticated like the Java language? Can we wrap that up ina 
way that still feels as efficient and friendly and responsive? 

In the early days, the Processing editor had the exact same user interface as DBN. 
| did the DBN user buttons and just moved them over to Processing. Over 

the years we've really simplified it, so nowit’s just really “run” and “stop,” as oppos- 
ed to like 50 buttons you can find on some of these “professional” program- 
ming environments. 

Having the icon be basically the “play” button was a big innovation of the friendly 
language of Processing. It isn’t “compile’—it’s “play.” 

That was intentional. If you were learning computer programming at that time, you 
were doing classes in a computer science department. You were only work- 

ing with text and math, and for visual people—people who are about the sensation 
of aesthetics—working in those classes, you would either stay for a few weeks 
and leave, or you would stay for a year and you'd be in pain. 

| took some computer science classes during undergrad, and there was a friend 
of mine in the design department who was also taking one of the courses. 

| was so excited because he was super talented; this really brilliant person. And 
I'm like, great, I'll have somebody else who's in this class and we're gonna 

be able to kind of commiserate or whatever. We got a couple weeks in, and he 
dropped out of it. 

That’s acommon story. 

It’s this sort of thing that’s really burned in my memory. | remember bumping 
into him while | was on my way to class, and him being like, “Man, | just 

can’t do it.” And it killed me because we’re learning all this other bullshit about 
data structures and algorithms and whatever, and it’s so far from what he 

wants to do. 

We saw a potential for learning how to code in a more essential and foundational 
way—that was really the vision of Processing. | don’t really think that was hap- 
pening at the time. Instead of, to say it in a really crude way, dumbing down coding 
so designers can understand it, we thought designers and artists and archi- 
tects can really do a great job with this. It just needs to be presented to them ina 
way that is motivating for them and engaging. And the web was just extreme- 

ly essential. The idea that you could export your work, throw it up on a server, and 
anybody who had a network connection anywhere in the world could see it. 
Putting the code people have made right there, so everybody can access it and 
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share and learn, was something we picked up from the browser, automatically 
allowing you to view HTML. 

BF Forme, learning how to code was entirely based on the willingness of other peo- 
ple to share their stuff. That was during a time before “open source” was a 
term that was coined, but there was just sort of a norm around it. If you were mak- 
ing stuff, you were probably going to share it. There was a willingness to do 
that. Later that started getting wrapped up in the open-source movement. There 
was a certain amount of “paying it forward” but also just going back to the 
idea of, how do you set a baseline for the community around the willingness to 
share? How co we try to get away from the obfuscation of things and closer 
to the explanation of them? 

By 2001, Reas had graduated from MIT and was teaching, while Fry was working on 

a PhD. Both were developing Processing into a scalable coding environment on the side. 

What started as sketches in their notebooks became an amalgam of Java and new 

programming elements which people could deploy as “sketches,” the term Fry and Reas 

used to describe a Processing program. The change in terminology was both sym- 
bolic and practical. They wanted Processing to feel accessible, while at the same time 
enabling experienced programmers to use the language as a way to break free 

from the typically rigid coding environment. This novel approach to coding caught the 

attention of Shiffman, a recent graduate of New York University, who was interest- 

ed in bringing the Processing language to the school’s Interactive Telecommunications 

Program (ITP). 

CR The traditional way of writing computer code is to figure everything out and then to 
transfer that into source code. The idea we pulled from the arts was: You don’t 
really often know where you're going. The only way that you figure out where you're 
going is to walk the walk, and to go down all the different paths. 

BF Inthe visual arts, you can sit with your sketchbook and scribble things out. If you 
screw up or do the wrong thing, you can flip to the next page and start again. 
That’s necessary because as you start working through ideas, a lot of them suck. 

CR Thegoal was to make the creation process alittle bit more informal. To get 
people to say, “I’m going to sit down for an hour, and I’m going to make five sketch- 
es, and then they’re all there in my sketchbook.” 

BF _ Thesketching aspect of it is essential to actually working out the idea because 
you can’t, unless you're a genius, just completely conceive of everything in 
your head and have it come out and work all the time, right off the bat. We wanted 
this [software] to be able to give folks a way to do half a page of code and 
see what happens. Because if you wind up having all these other steps and you 
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have invested all this time into just getting something on the screen, that makes 
you work ina really rigid way. 

Ben once said something about never joining more than two words in a function 
name. All these computer programs are so wordy—you know, “Java factory 
object builder dot like blah blah blah.” So the idea of the sketching and the sketch- 
book is kind of like the foundation of all of that thoughtfulness around language. 

| think it works well for people who are getting started, but even if you actually und- 
erstand this stuff well, there’s no reason to further burden yourself with all this 
extra nomenclature. We wanted to make sure that the things that should be simp- 
le or things that are going to be used a lot were really efficient and really clear. 

| recall at the time that the two different tools | was using were Director and C++. 
| don’t know that | ever really liked Director, although | appreciated it. The inter- 
face drove me crazy. There was a timeline and a stage and all that stuff. | just wan- 
ted to play with math algorithms and visualize them. Or | was working with C++, 
and that also drove me crazy because it was really difficult to debug. Processing 
just landed in this perfect sweet spot between the two. It was kind of a right 
place, right time thing in that | was graduating, and | proposed (or maybe Red 
[Burns] suggested it to Dan O'Sullivan, | don’t remember) something like: 

| see Lingo being used, and | see C++ being used in this graduate program at 
NYU. | think Processing would be really great to take over. It’s never been 

about a competition-it’s a rising tide lifts all boats kind of thing—but being able 
to basically port the curriculum that used Director to Processing was one 

of the first things that | did [when | joined the faculty]. 

| remember around 2004, there was a transition from a lot of folks being like, “Oh 
yeah, Processing. I've heard of that; | might try it out.” To like, “Oh, Processing. 

| actually used that for my thesis.” And | was like: Did you graduate? Is everything 
okay? There was sort of an inflection point of it suddenly being in use, and we 
probably owed ITP a great deal for that. 

When | was traveling, everywhere | would go, | would find all these people using 
Processing. 

It just kind of grew very steadily from there. It’s sort of funny because we have a 
chart of the users for growth, and it’s this very straight line going steadily up- 
ward. Over the years there were various points in the history where we're like, “Ok- 
ay, this is as big as this audience will get,” and then it just kind of kept growing. 
There were anumber of institutions really early on who | would say took a chance, 
and it usually came from a student, or a young faculty member who wanted to 

do a workshop. This was way before there were classes around Processing, and 
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alot of the software development happened through needing to get out a new re- 
lease for a workshop. Sometimes Ben and | were doing a workshop toge- 
ther, and we'd release the software at 3 a.m., and then be in class at 9 a.m. to 
teach. It was largely pushed forward by necessity. 
As Processing became one of the primary environments for creative coding in the early 
aughts, a community started developing around it. People were eager to use the tool, 
and a smaller subset of them wanted to help develop the infrastructure required to main- 
tain the growing piece of software. Community members from around the world 
contributed to Processing Libraries (https://processing.org/reference/libraries/), which 
extended Processing’s capabilities and expanded the language to work in different 
mediums like sound, hardware, and computer vision. The software itself continued to ev- 
olve, but the support system behind it was lagging. Since its inception, Processing 
had been a labor of love. By 2011, Reas and Fry decided to formalize the organization's 
work by establishing a foundation that could help raise funding and expand access 
to Processing through educational efforts. 
Jonanna Hedva, Director of Advocacy at Processing Foundation. 
Saber Khan, Education Community Director at Processing Foundation. 
Lauren Lee McCarthy, p5.js Creator. 
Dorothy R. Santos, Executive Director of Processing Foundation. 
CR _ Processing had been around for about 11 years by the point we started think- 
ing about the foundation. We had been working completely on a volunteer basis. 
We probably should have formed the foundation about six years before we 
did because we were always really struggling to get the software released, and we 
didn’t have a lot of energy or ability to plan for the future. We had a few pieces 
of funding come through from different institutions at different points in time, but 
the project had really just grown to a scale that we needed to start working 
with money and started applying for grants. So the foundation really came out of 
necessity of needing to fund the software development. 
JH __ Istarted working in Casey's garage in the summer of 2014. At the time we had the 
501(c)(3) status, and that was sort of it. There was no clear plan or strategy 
or vision. In the early days it was really trying to figure out how to translate the 11 
years of work with the software into a nonprofit foundation that would serve 
some sort of community. There was already a thriving community, so | think the 
question was: What role can the foundation serve to support what's already 
happening? Andis there anything that we could do to catch the momentum and 
bring in more support? 
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CR Aninitialidea was, let’s bring in money, and we'll be able to hire some developers— 
because the people who were developing the software at the time just had 
too much responsibility and too much weight on their shoulders to be maintaining 
such a huge piece of software for such a large international community. It just 
wasn’t possible for them to carry that burden. 

LLM Wewereatapointin 2015 or 2016 where we felt like everyone was work- 
ing at capacity. There was this moment of: Okay, we either have to scale back what 
we're doing so it can be manageable, or we need to scale up alittle bit to 
build some infrastructure so we can really think about sustainability. | remember 
asking, “Who wants to scale back what we're doing?” And nobody wanted 
to, so we had to go the opposite direction. It’s really been about trying to think ab- 
out what we need to support what we want to do in a way that is manageable 
and also creates opportunities for people who can’t afford to volunteer their time 
to these projects. 

JH — Open source is tricky. It’s kind of a paradox because the whole point of it is that 
anyone can use it, participate in it, and build it, which also means that there’s 
no money. It’s free for everyone to use. You can participate in the community, but 
it also requires a lot of volunteer labor, which of course excludes an entire 
swath of the population outright. 

CH Myone-liner is that free software is expensive to make. In reality, we weren't suc- 
cessful as a foundation in funding development in the early years, but the 
foundation really expanded the project in a lot of ways that | think were unforeseen 
by me. 

JH — Itbecame very clear, very quickly, that things like diversity and inclusion and acc- 
ess were actually something that we could do as a nonprofit and foreground 
as a priority. We really wanted to try to support community members who hadn't 
been supported in other open-source places and contexts before that. The 
thing that felt really important to me about Processing was not necessarily what 
the potential is to create, although that feels really expansive. But the poten- 
tial to change how these things are seen, what code can be, and what people who 
contribute to software projects could look like. The transgressive potential 
to me is almost more exciting than the thing of like, “Oh, we could make a cool ani- 
mation,” or something. | mean, that’s nice too, but to me this is very politi- 
cal, actually. 

DRS  100,000% to everything Johanna said. The way that one contributes to a project 
canbe so multifaceted and can take on so many permutations. For a project or 
open-source software project to be able to do that and to kind of have that ripple 
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out into not just even like a local or U.S. community, but a global community— 
that’s very hard to do. 

There’s a way in which we're taught to believe that a technology or tools are just 
about the code. And | think that’s totally false. A contributor is someone that 
contributes, not necessarily writing code. 

| think all those things make Processing a really important voice in the K-12 
education space. In K-12 education there’s a lot of interest from Silicon Valley and 
corporations to have their curriculum and their presence [in schools]. | think 

this makes it really important that the software gets made by people who have poli- 
tics and interests. | find that often in K-12 there’s the sentiment of, you can 

have fun when you're a kid, but when you grow up it’s gonna get really serious. 

| don’t want students to ever feel that they must learn Processing or that they 
must learn programming in order to be successful in the world. But this is also a 
part of the challenge of getting funding. Oftentimes you have to prove the worst 

of a project in terms of its output—not because of what it teaches an individual. 
| just believe in the value of the arts. We’ve always approached coding in the 
same way that it’s useful to learn how to play a violin or a recorder when you're in 
elementary school-it enriches life. We're not training worker bees. We're al- 
lowing people to be creative and expressive in this emerging way. 

| actually took one of my first Processing workshops at Gray Areain 2011, 

and | remember | felt very embarrassed and ashamed because | literally thought 
to myself, “Everyone in this 101 beginners workshop knows how to code 

really well.” They're making like freaking wormholes in their laptops, and | was ex- 
cited to make a circle that could bounce up and down. 

One of the things we thought about really early on with p5 [note: more on pd in 
just amoment] was the culture on GitHub, whichis like the main place where 

the code base is developed. A lot of the conversations can be very aggressive, 
and you have to put yourself forward as an expert in order to be listened to. 

And we just really wanted to change that dynamic. 


date to the original Processing tool built for a web interface that used JavaScript as its 
core coding language. In 2019, McCarthy stepped down as the lead of p5.js after 
six years of leading the project in order to make room for a new generation of leader- 
ship. Itwas amoment of transition for the organization, as it searched for a way to 
make leading a large-scale open-source project more equitable and sustainable. p5 
embraced a novel rotating leadership structure that would pass the reigns from 
leader to leader every year as a way to breathe new ideas and perspectives into the 
project. Today, p5 continues to focus its efforts on expanding its reach to people 
outside of the typical creative coding profile. 
evelyn masso, p5.js Co-Lead. 
Cassie Tarakajian, p5.js Online Editor Lead. 
Qiangian Ye, p5.js Co-Lead. 
LLM  p5 really started during a conversation between Casey, Ben, Dan and me where 
they asked: “What would Processing look like if it were reinvented today?” 
And so the first thought we had was, well, it would live on the web again, and it 
would run in all the browsers really easily. Beyond that, we were also think- 
ing about how we would take that early idea of expanding access to this field and 
kind of update that in 2013. What does access mean to us at this point, and 
how can we evolve that idea? 
CR In 2001, Processing was completely entwined in the world wide web. You 
would export from Processing, you'd put it up on the web, and you’d share it with 
everybody. But because technology moves and changes so quickly, the abi- 
lity deteriorated over the years. p5 allowed this way of thinking—a lightweight ap- 
proach to entering into the web again. It was so essential. 
BF __ What’s so fun about stuff like p5.js is that it gets us so much closer to that idea of 
turning the computer on and Basic is just there. The browser is this sort of 
lingua franca thing that works everywhere. The idea of having folks be able to con- 
nect code right in that environment was super exciting. 
LLM | started working on p5 within the context of an early fellowship, which is a 


Around the same time that the Processing Foundation was established, another 
project started to take form. In 2013, Lauren Lee McCarthy ran into Reas at a confer- 
ence and they began talking about the lack of diversity in the open-source coding 
space. Soon after, Reas reached out to McCarthy to see if she wanted to work on Pro- 
cessing. When McCarthy joined the project, she began thinking about how Pro- 
cessing’s initial goals of access could be updated for 2013. She believed that a web- 
based coding environment could make the software more accessible to people, 
from both an educational and technological perspective. The result was p5.js, an up- 
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program that the Processing Foundation runs. It was really just like 100 hours of 
work where | was experimenting with this idea. Pretty early on, | joined with 
Evelyn Eastmond (http://www.evelyneastmond.com/), who | was co-teaching with 
at RISD, and we kept developing this idea and teaching it to our students. 


CR Atthetime, in order for high school and middle school students to work with 
Processing, they would need to install it on the computer labs in schools. A lot of 
the IT folks who were running these labs didn’t want to install this piece of 
open-source software from an untrusted source. It created quite a bit of friction. 
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With p5 being able to code directly through the browser, that whole difficult ad- 
ministrative hurdle was taken out, and it became far more accessible. 

In 2013, | was not aware of Processing at all. | started getting into teaching tech 
around 2012 or 2013, and like a lot of teachers, found myself needing to 

learn more. A lot of folks in New York suggested checking out Processing, but it 
wasn’t what | was looking for. When p5 came out, that made a huge differ- 

ence because a lot of logistical questions kind of got solved. 

One of the things | felt early on with p5 is that it wasn’t just about having a diverse 
community of users; it was really about asking who’s making the tool, who's con- 
tributing to it, because any tool is going to be embedded with the biases and the 
perspectives of the people making it. Some of the things we did really intention- 
ally were saying, okay, let’s expand what it means to contribute to a tool. It’s not 
just writing core code, it could be making graphics, it could be doing outreach, it 
could be organizing, it could be teaching—these are all building this tool together. 
Part of the impetus for the web editor was a lot of this access stuff. When | first 
started learning how to program, | remember day one of coding class my profes- 
sor opened up his computer, opened the terminal, and | was just like, what is 
happening? No one explained it [coding] to me, and | really wanted to be part of 
aspace where you could start writing code and it didn’t feel like you were 
immediately doing something wrong. 

It’s been this continuous process of trying to ask ourselves what access actually 
means, and then trying to address it in different ways. Less of a top-down 
strategy and much more of a bottom-up, constant learning where we realize when 
we got something wrong or missed something, and then think about how to 
address it. 

| remember at the 2019 Contributor Conference (https://p5js.org/community/ 
contributors-conference-2019.html) we talked a lot about how we make 

it more clear that the access work is kind of like the most important part of this. 
We've been thinking alot about disability. Normally the elements that we’re 
using under the hood to make graphics on the screen are as ones that are not 
readable to someone who is using a screen reader or someone who is blind 

or has low vision. We've been doing one project that’s been led by Claire Kearney- 
Volpe, Luis Morales-Navarro, and Mathura Govindarajan, and they've been 
thinking about how we incorporate image descriptions into the code itself, and 
how we incorporate audio output so it crosses different domains. 

There have definitely been more tutorials for more and more different kinds of 
people, especially in different languages but also different age ranges. 
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We have seen people using p5 in K-12 education, and there are more people cre- 
ating work to make pd accessible for elders. In 2020, two of the Processing 
Foundation fellows, Innwa Yeom and Seonghyeon Kim, made a project called pd 
For 50+ (https://p5for50.plus/about/) that created materials and tools to teach 

p5 to people who are older than 50. All of their teaching materials are in Korean 
because that’s where they had all of their workshops. 

| think having a voice in the tools that are being built is important. If you step back 
and think about what the point of technology is—it’s to help us, right? And if 

the people designing the technology don’t know who you are, they're probably not 
going to be able to help you. This was part of the foundation of Processing. 

What are tools that you can use to do art with computers? It’s Adobe products, 
which are a black box that you pay for and you have no say over and then 

at any moment could just disappear. If you give people the reins, then they'll 
make themselves. 

We didn’t start from zero, though. Processing had been made, and it wasn’t just 
the syntax or the code that we were building off of—we were building off 

of the experiences that Ben, Casey, and Dan had, not to mention the Processing 
community and a lot of other creative coding and open-source communi- 

ties. We were able to learn from that and get advice from those community mem- 
bers in making some of the decisions we did. One of my big hopes for this 

work in general is that these projects don’t have to try to reinvent the wheel and 
have all the same problems. We should understand how much we're part 

of alarger Processing project, but we're also part of a much larger community, 
and these are all building on each other. 
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“How does one speak up to challenge the establishment? 
| think nuance and candor are essential to start a con- 
versation. No one likes to be criticized, but everyone loves to 
be understood. When | was learning to code, a friend 
told me “treat your computer like your younger sibling.” This 
approach of care and play is essential in exploratory 
and poetic computing. | think a similar approach is neces- 
sary to navigate the tech community. As this project 
grows init’s scale and diversity, | want to ask. Who do we 
make our oddkins?” Taeyoon Choi 
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PER AModern Prometheus, The History of Processing, 2018, 


001 Casey Reas and Ben Fry. 
When we started Processing in 2001, the 


| P r pawns | ee me goal was to bring ideas and techno- 
oe Mf , Ps id hd nT logies out of MIT and into the larger world. 
cial One idea was the synthesis of graphic 
RX A ye ae design with computer science, combining 
By A “G ae oi A [551 the visual principles of design with 
FIG Selection ofimages created fromProcessing ways Of thinking about systems from com- 


001-01 examples in 2003 to show a range of 2D/ puter science. We also wanted to share 


3D techniques, drawing with geometry and : : : 
shoteurdptiy andnatworking andl physical comp a way of working with code where things are 


uting (electronics) capabilities. figured out during the process of writing 
Grid of images, abstract graphics, illustrations, the software. We called this sketching with 
and photos. code. A third idea was to share what we 


had learned about how to teach programming to designers—to share this beyond the 
people we could teach directly through our workshops and classrooms. We wanted 
to spread this as far as we could. 

This was all made possible by a set of programming tools we created specific- 
ally for making pictures, for choreographing animation, and for creating interactive work. 
Over many years, we refined a set of elements for creating visual design with code. 
Additionally, we didn’t start this work from scratch, we built on top of existing ideas and 
code from people who worked in this 
area before us. 

The Lab 
Processing has direct origins at the MIT 
Media Lab going back to the Visual 
Language Workshop (VLW.) The VLW was 
founded in 1975 and it became a found- 
ing research group at the Lab from 1985 to 
1994, when Muriel Cooper, the director, 
passed away. Cooper was a graphic design- 


FIG Information Landscapes. Muriel Cooper, : : : 
001-02 David Small, Suguru Ishizaki, EarlRennison,  €F at MIT, first at the Office of Publica- 
and Lisa Strausfeld, 1994. Image copy- tions and later as the founding art director 


ean, del peas Courtesy at MIT Press. The VLW focused on tra- 

IsIble Language Worksnop archive, rogram tae . . . eget 

in Art, Culture and Technology (ACT). ea ed ceed is a the 
Three-dimensional text at different scales, omain of screen-based publication 


creating angles in space. and information spaces. One of the most 
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compelling and public demos to emerge from the VLW was /nformation Landscapes, a 
three-dimensional presentation of animated, interactive typography that was well 
ahead of its time. Processing was hugely influenced by the research and people within 
the VLW. 
Processing emerged directly from the Aesthetics and Computation Group (ACG), 
a research group started at the Media Lab by John Maeda in 1996. Maeda’s re- 
search at the Lab continued to synthesize visual design exploration with emerging soft- 
ware technologies. The students he recruited worked within similar themes to the 
VLW and their work continued research into programming tools to create visual media. 
David Small was the one person to start in the VLW and to graduate with his PhD in 
the ACG. His work and knowledge established a continuity. Within the ACG, code was 
most commonly written with the C++ programming language and a graphics tool- 
kit called ACU that was started by Ben Fry, with Tom White and Jared Schiffman contrib- 
uting significant portions as well. In the late 1990s, when we started at the Media 
Lab, ACU was used on Silicon Graphics Octane and 02 workstations—computers that 
cost tens of thousands of dollars at that time. By the year 2000, ACU was used on 
PCs configured with a graphics hardware that cost hundreds of dollars. This shift in hard- 
ware affordability is one of many reasons why, at the turn of the century, it became 
possible to create the kind of work created within the VLW and ACG outside of acade- 
mic and corporate laboratories. 
The ACG website remains online at http://acg.media.mit.edu/ and there are a 
few personal backups. A slice of the work is archived in Maeda’s Creative Code 
poor pubisted by Thames and Hudson in 2004. The ACG concept videos (http://acg. 
media.mit.edu/concepts/) that Maeda 
encouraged us to make are low-resolution 
videos by today’s standards, but they 
show the work in motion as intended. Most 
of the ACG MS and PhD thesis docu- 
ee setour te 2 ments (http://acg.media.mit.edu/projects/ 
theses.html) are online as well. 
aan John Maeda started the Design By 
Conn fees =I 00x] Numbers (DBN) (http://don.media.mit. 
FIG Design By Numbers online coding system with- edu/) programming platform within the ACG. 
001-03 inthe Courseware, an online system for Both the MIT Press book and software 
writing code, turning itin, and exhibiting the forthe project were released in 1999. Mae- 
results. This screen capture was made in 2000. ‘ : 
Showing abstract depiction of time, codeon 4a brought the two of us into the project 
right sets millisec, sec, min, hour. after the initial release to help maintain and 


time is continuous 


set [msec 60] 80 
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extend it. Many aspects of Processing were 
modeled after DBN, which also inte- 
grated a code editor with a language. DBN 
was a minimal system, the canvas was 
always 100 x 100 pixels and only gray val- 
ues could be used—there was no color. 
These constraints, as well as comfortable 
code elements such as paper and pen 


FIG Notes in Casey's sketchbook in 2001 from our made DBN easy tolearn. : 
001-04 first conversation about the project that Teaching with Design By Num- 
would become Processing. There was an early bers was a formative experience for us. Our 


focus on creating a coding environment that would first event was a workshop at the AIGA 
be compatible with the tradition of foundation studies in national headquarters on August 25. 1999. 
art and design education. : 

Notebook, handwritten text reads sketchbook- This “computational illustration” work- 
the aesthetics of computation, time, form, color,im- shop was planned for people with no prior 
age, space. background in programming and even 
for people without much experience operating a computer. Maeda led the workshop and 
Tom White also assisted. Maeda later asked us and Elise Co to teach a series of 
workshops at RISD. For these and other workshops at the time, we designed and built 
the DBN Courseware software, a series of Perl scripts that allowed teachers to cre- 
ate exercises and students to upload their work directly to a web server. 

This experience kindled the ambition to start Processing. We started by ex- 
tending DBN to include color and other features, but soon realized that these limitations 
were the essence of that platform and it shouldn't be expanded. We wanted to make a 
system that was as easy to use as Design By Numbers, but with a bridge to making more 
ambitious work. We wanted to allow people to work in color, at large sizes, to create 
3D graphics, and more. Simple Processing sketches are almost as simple as DBN sket- 
ches, but Processing scales up—it has a “low floor” and a “high ceiling.” The ceil- 
ing is more similar to the C++ programs we used to write with ACU partly because the 
rest of the Java programming language and its libraries were available. 

Language, Environment, Community 
We created Processing as three parts: language, environment, community. Each 
partis essential; the project is defined by the interactions between all three. 

Language 
AProcessing program is called a sketch. This is more than a change in nomenclature, 
it’s a different approach to coding. The more traditional method is to resolve the 
entire plan for the software before the first line of code is written. This approach can 


3 
= 
= 
=I 
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work well for well-defined domains, but when the goal is exploration and invention, it pre- 
maturely cuts off possible outcomes. Through sketching with code, unexpected 
paths are discovered and followed. Unique outcomes often emerge through the process. 
Processing isn’t a language created from scratch, it’s a hybrid between our 
own elements and the Java programming language. As a minimal example, this is how 
the standard “Hello World!” program is written in Java: 
public class HelloWorld { 
public static void main(String[] args) { 
// Prints “Hello, World” to the terminal window. 
System.out.println( “Hello, World”); 


} 


This program encloses the line that writes the text to the screen within two layers of addi- 
tional detail that are important for large programs, but are confusing for a simple pro- 
gram. This is how the same result is achieved in Processing: 

print( “Hello World!”); 
This “Hello World!” example, however, has very little to do with the essence of Process- 
ing—writing code to make pictures. This is amore common first Processing sketch: 

line(10, 20, 90, 80); 
This code draws a line to the screen from coordinate (10, 20) to (90, 80). A more in- 
teresting short Processing sketch draws the line from the center of a 500 x 500 pixel 
canvas to the position of the cursor: 

void setup() { 

size(500, 500); 


void draw() { 
line(width/2, height/2, mouseX, mouseY); 

} 
Because Processing is made for creating pictures, the language includes elements spe- 
cifically for working with form, color, geometry, images, etc. Atthe same time, any 
code that can be used in Java can also be used in Processing. The main idea is to make 
it easy to do simple visual things, but to also allow a more experienced programmer 
to do complicated things within the same language. 

Environment 
The environmentis the software application that sketches are written within. The Pro- 
cessing environment is called the PDE, the Processing Development Environment. 
The current PDE for Processing 3 has just a few buttons to Run and Stop sketches and 
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to turn on and off the Debug mode. (The ear- 
B lier PDEs had a few more to Open, Cre- 
‘| ate, Save, and Export sketches.) The prim- 
~ aryidea of the PDE is to make it quick 
and easy to start writing sketches. The sec- 
ondary idea is to use the PDE as a sketch- 
= book, a place to save the sketches and to 
provide easy access to open and run 
them. The PDE can also open and run ex- 
FIG Processing ALPHAIDE running on Windows. ample sketches and can easily link to 
001-05 Processing IDE, sketch with abstract the Reference. 
ee The PDE was created for begin- 
eo ners and not everyone uses the PDE for writ- 
Sosuman a Ingsketches. Some people use other 
programming environments like Eclipse 
and other text editors like Sublime Text 
2 to work with Processing. The PDE has ev- 
olved since 2001 with the Processing 
Pa _, 3PDE presented a major step forward. 
j Community 
Se The communityis the group of people who 
write Processing sketches and who 
FIG Processing BETA IDE running on Windows. share work and code with each other. We 
001-06 Processing IDE, sketch with expressive lines have never written custom software to 
eae and mncluptying auton center. 
support community engagement, but we 
M have used existing Forum software 
and different community members have 
created new opportunities. Early ver- 
sions of Processing exported sketches to 
Java Applets and at the time, that was 
: an easy and convenient way to share work 
ES through the web. By default, exported 
FIG Processing 1.0 IDE running on Mac OS. sketches included a link to their source code 
001-07 Processing IDE, sketch with white dots making and the web page included the text “Built 
3D form against black background. with Processing.” This phrase was a simple 
search term to explore work created by others and the source code included on the 
page was away to learn how that sketch was created. Users could remove the links to the 
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m source code, but we wanted sharing to be 
the default. We learned coding in large 
part by looking at others’ code, and wanted 
| this openness to be central to the project. 
The first Processing Forum, at that 
time called Discourse, was launched 
August 2, 2002. The first posts in the /ntro- 
ductions sections were made by REAS, 
=| adrien, relformlat, eviltyler, tomek, ikO, fdb, 
Josh Nimoy, Mike Davis, Takachin, ed- 
wardgeorge, riboflavin, jes, and Alex. For 
o Pe ee S.0IDEwith Examples menu open the first few years, the Discourse was 

Processing IDE, examples menu shows many Vibrant space. It was a place where peo- 
folders including Data, Animation, Drawing, Curves, | ple shared and helped each other. We 
Color, File 0. were all exploring together and some peo- 
ple who knew more than others were generous in offering advice. The “alpha” forum 
was Closed in 2005 and replaced by the “beta” forum, which was closed in 2010 for the 
“1.0” Forum. The complete set of prior forums are archived online: Alpha 
Forum (https://forum.processing.org/alpha/), Beta Forum (https://forum.processing. 
org/beta/), 1.0 Forum (https://forum.processing.org/one/), 2.0 Forum (https://fo 
rum.processing.org/two/). In May 2018, we launched our fifth forum (https://discourse. 
processing.org/), once again called Discourse. 

In the spirit of community, individuals have created other opportunities for learn- 
ing and sharing. The longest-running and most prominent effort is Sinan Ascioglu’s 
OpenProcessing, which recently launched a new interface which is compatible with p5.js 
(https://p5js.org/) sketches. Earlier initiatives include the Free Art Bureau’s Process- 
ing Cities initiatives to start user groups in cities around the world, Tom Carden and Kar- 
sten Schmidt’s Processing Hacks wiki, and Tom Carden’s blog aggregator. Early so- 
cial media sites created community and energy around Processing through tags used 
within sites like Del.ici.ous and Flickr. OpenProcessing is going strong, but these 
other initiatives have changed as the web and the community have shifted. 

The Processing source code has been available online for many years, first 
through SourceForge and later through Google Code, but our move to GitHub in 2013 
started a new kind of community around Processing through increased quantity and 
quality of code contributions. GitHub makes it easier to integrate contributions and to dis- 
cuss details. It also helped the expanded development teams to communicate and 
track software changes. A full list of contributions (https://github.com/processing/proc 
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essing/graphs/contributors) to the Processing core software reveals this work. The most 
essential community contributions to Processing are the Libraries. There are over 

one hundred Processing Libraries (https://processing.org/reference/libraries/) that ex- 
tend the software in different directions beyond the core. In categories ranging 

from Data to Simulation to Video & Vision, the Libraries are independent pieces of soft- 
ware that integrate into the Processing language. Most Libraries are developed 

by independent community members and the source code and examples are made 
available for everyone to use and learn from. 

On Growth and Form 
Processing started with a few notes in a sketchbook in spring 2001. In fall of that year, 
Ben taught the first workshop at Musashino Art University in Japan. This pre-alpha ver- 
sion of the software, Processing 0005, was minimal, but this early version of the lan- 
guage was integrated into a spare Processing environment. Because Casey was teach- 
ing at the Interaction Design Institute Ivrea in Italy at the time, many early workshops 
were in Europe. Processing evolved rapidly through these early workshops and the lan- 
guage was frequently changed during the alpha release period. We’re grateful for the 
institutions that gave us a chance and the opportunity to spend time with their students. 

In the early days, the project was called Proce55ing and the website was 
www.procedbing.net. In the very beginning the project name was always changing: Pr0- 
c3ssing, Pro35sing, Processing, etc. We changed the name to “Processing” and 
the website to www. processing.org in 2004 to reach a wider audience. In general, the 
name of the project has received continuous snarky comments from people who 
don’t like it, to frustrated people who can’t find related information in search queries. 
The idea of the name “Processing” was to focus on “process” over final results 
and to indicate the active state of software; it’s always running, it’s realtime media. 

For the first few years, Processing was distributed to people who signed up 
through the website. At that time, we were still working our way through the software 
agreements with MIT and the software was rough. The first www.procedbing.net 
site went online Oct 20, 2001 with a set of examples, a reference, and the following text: 

Procedéing is an environment for programming images, movement, and 

interaction. It is a sketchbook for developing ideas, a tool for creating prototypes, 

and a context for learning the fundamentals of computer programming. 

The PrOcessing environment is in its early stages and will continue to develop. 

Pr()ceSding is written in Java and enables the creation of Java App- 
lications and Applets within a carefully designed set of constraints. It uses a 2D/ 
3D Java rendering API that is a cross between postscript-style imaging in 

2D and 3D rendering with OpenGL. 
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Before the 1.0 version of the software, we named the releases in order, rather than us- 
ing the more traditional software release numbering (1.0, 2.0, etc.). For instance, 
Processing 0069 was the 69th release of the software. After we switched the style of 
numbering, we continued both for a time; Processing 1.5.1 is also release 0197. 
Revision 0069 was the last alpha release, revision 00161 was the last beta release, and 
release 1.0 is also 0162. The dates and notes for every release of Processing are 
online at GitHub (https://github.com/processing/processing/commits/master/build/ 
shared/revisions.txt). 

In 2007, we published the Processing textbook, Processing: A Programming 
Handbook for Visual Designers and Artists. This textbook, published by MIT Press, 
defined our vision for how Processing could be used in a university classroom. It was 
developed through years of direct classroom experience teaching at UCLA and 
Carnegie Mellon. The software is discussed within the context of the history of experi- 
mentation within the visual arts and technology. It includes interviews with profess- 
ionals in the expanded fields of animation, performance, and graphic design. A set of 
Extension chapters expand the domain into audio, computer vision, electronics 
and other topics. This book, in addition to Learning Processing by Daniel Shiffman and 
Processing: Creative Coding and Computational Artby Ira Greenberg, were the first 
round of Processing publications that further extended the reach of the software in aca- 
demia. Amore complete list of books (https://processing.org/books/) written with 
Processing is published on the Processing website. Over time, energy has shifted away 
from books and onto online instruction and video tutorials. 

The number of people using our 
software continues to increase. As 
apart of this transition, the direct link be- 
tween us and the original community 
spread so thin that the single Processing 
community has become a series of 
more fragmented groups associated 
FIG Number of times the Processing softwareis around school, cities, social media 
oo ea Oe eae. Platforms, oF topics. The Processing sot 
eys are correlated with the academic year with the ware and the people who used it were 
highest points in the fall and the lowest during thesum- largely synonymous in the beginning, but 
mer. This data doesn’t account for shared compu- over time, it’s become a piece of soft- 
ter use or when people turn this reporting off in the soft- ware that people use without a knowledge 
ware Preferences. Pp : see 

Graph with exponential growth, cyclical valleys Of the original context. This was a diffi- 
at the end of each year. cult and slow transition, but it provided new 


PROCESSING COMMUNITY CATALOG PER 001 028 


oe opportunities for more people to be in- 
7 savaseriote VOlVed and for the software and its 
_ core ideas to spread. As the community 
fring ee grew, it became increasingly difficult 

to determine how and why people were us- 
bepin iby Nunbeys) ——-# “> ing the software, and therefore it be- 

' came harder to focus on the development. 
fostecripe eer Recently, the software has started to 
be used more frequently in high schools, 
mostly for classes in math and sci- 
ence. Universities continue to integrate the 
software into curricula; it has expanded 

into computer science and humanities de- 

FIG Processing has been influenced by other 


001-10 coding systems and it has influenced others. partments. 
Processing logo in center, surrounded by The Present ; 
graph of libraries including DBN, Wiring, p5.js, Process- We have had growing pains where 


ing.py, Postscript. the expectations of the community and the 
complexity of the software have outpaced our ability to maintain and improve it. 

The vast majority of the code is written by the same small number of people volunteer- 
ing their time—there are no paid full-time developers. Technology shifts like moving 
from 32-bit to 64-bit operating systems and the emergence of high-resolution screens 
have created the need for significant updates even to continue running on ever- 
evolving operating systems and hardware. We started the Processing Foundation in 
2012 along with Daniel Shiffman to expand our reach and to support the software 
development. Lauren McCarthy is now the fourth member of the Foundation Board and 
we have additional collaborators and advisors. 

The original mission of Processing was to create software that made learning to 
code accessible for visual people (designers, artists, architects) and to help amore 
technical audience work fluidly with graphics. We aspired to empower people to be- 
come software literate—to learn to read and write software. We wanted to change 
curriculum in universities and art schools around the world. Instead of teaching students 
how to use software, we thought it was just as important to teach them how to cre- 
ate software. 

The further expedition of the Processing Foundation is to make code more 
accessible to an even wider audience. Toward this goal, we're investing our resources 
in mentoring and in collaboration. We believe in the synthesis of the arts and tech- 
nology, and we know the arts are a necessary part of education from a young age. We 
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do not want to live in a world where technology is developed without ideas and input 
from the arts and where only some people have access to learning to code. 

Right now, we're at the start of Summer of Code 2018. Through this program, 
sponsored by Google, we’re mentoring fifteen students to learn about software 
development. These students are working on different parts of the Processing Founda- 
tion software. We’re also in the middle of our 2018 Fellowships (https://processing 
foundation.org/fellowships) cycle. A Processing Fellowship is a grant with mentorship 
that allows an individual or group to realize a project within the mission of the Foun- 
dation. We awarded nine Fellowships this year. We’re working with the Fellows on a wide 
range of projects: developing high school curricula, teaching coding on smart 
phones in Ghana, documentation for p5.js developers, improving the accessibility of our 
tools, and creating a new website build system for Processing.org, to name a few. 

From the original Processing software, the Foundation is now supporting a range 
of different projects. The p5.js project is a JavaScript reimagining of Processing 
within the context of contemporary web browsers. This project was started andis led by 
Lauren McCarthy. Processing.py was started by Jonathan Feinberg and it’s nowa 
Mode for the Processing 3 editor. Additionally, Andres Colubri is extending Processing 
for Android as a Mode for Processing 3. Gottfried Haider has written code to get 
Processing 3 running well on Raspberry Pi and CHIP hardware, and he has written a li- 
brary to read and write directly to the I/O pins. These inexpensive computers are 
in line with the original mission of Processing, to make learning to code accessible 
and enjoyable. 

Amore complete list of people who are contributing to Processing, and who have 
contributed in the past, is available as the People (https://processing.org/people/) 
page on the Processing website. Contributions through GitHub are diagrammed with- 
in the Processing Foundation repositories (https://github.com/processing). 

We've been working on Processing now for nearly seventeen years. It’s difficult 
to remember clearly what it felt like in 2001, when the first website went public or 
the day the Processing Alpha software was released on February 2, 2004. We have an 
archive of documents and “to do” lists and every change made to the code has 
been tracked, but this data doesn’t capture the mood or personal impact. We hope this 
short text helps to bridge Processing in 2018 with its past. Most essentially, Pro- 
cessing is about people. It’s about individuals and collective learning and exploration; 
it’s about sharing ideas and giving what you can. 
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; Saati __ tion), a collection of free education ma- 
ce aa Chavet (nto es. animish terials that can be used to teach our soft- 
Daniel Shiffman in shirt andtie gesturingin | wareinavariety of classroom settings. 
front of a rainbow, unicorns, floating cupcakes. Rather than endorsea specific curriculum, 
we've engaged with a variety of educators from our community, ranging from K-12 
teachers, to folks who lead workshops at hackerspaces, to university professors in inter- 
disciplinary departments. We've asked them to share their teaching materials, 
which anyone can use. 
createCanvas kicks off with an in-depth, two-part interview with Dan Shiff- 
man! Danis the beloved host of The Coding Train, the vibrant YouTube channel of week- 
ly creative coding tutorials. Dan has been part of the Processing Foundation since 
before it was a foundation. In this episode, he talks to Education Community Director 
Saber Khan about how and why he started making educational materials for cre- 
ative coding, what open source contribution can look like (spoiler: almost anything!), and 
he takes us behind the scenes of his YouTube channel, which currently has 889,000 
subscribers. 
Dan Shiffman, Associate Arts Professor at New York University’s Interactive 
Telecommunications Program. 
Saber Khan, Education Community Director at Processing Foundation. 
SK — Hieveryone. Welcome to createCanvas, a podcast about the Processing educa- 
tion community. I'm your host, Saber Khan, the Education Community Direc- 
tor of Processing Foundation. [Intro is the same as above.] 
I’m here today with Dan Shiffman. Dan, do you want to introduce yourself? 
DS Ohboy. Okay. Yes, | definitely want to introduce myself. My nameis Dan, and I’ve 
been part of the Processing Foundation since the start. The Processing 
project itself dates back 10-plus years before we started the foundation. | start- 
ed working with Processing in 2003, a couple of years after Casey Reas and 
Ben Fry started it. | started working with Processing by discovering it here where 
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we are sitting right now at ITP, which is a two-year master’s program at Tisch 

School of the Arts, NYU. | haven’t looked back since, and I’ve done a lot of 

things with Processing, teaching and making video tutorials and all that stuff, 

which I’m sure we're going to get into. 

What do you do here at ITP? 

My official, fancy-sounding title is Associate Arts Professor, and most of the 

courses that | teach are—the way | think of them is they’re computer science-like 

classes. | look at a lot of topics that you would findin a computer science 

course, but through the lens of art and creativity and open source. 

How did you get involved? You said you discovered Processing when you 

came to the ITP. 

Yeah, so there were a couple people teaching with it, and doing workshops 

here. Amit Pitaru was teaching a class called Code and Me, and JT Nimoy had 

done a workshop (http://cdn,jtn.im/itp/p5/workshop/) that introduced Pro- 

cessing to ITP. The curriculum here, the learning to code curriculum was, at the 

time, using primarily Macromedia director. 

Wow. 

And the lingo programming language. | took a course in Java, the actual Java 

programming language. | took a course from Danny Rozin about doing comput- 

er graphics and image processing with C++ and Windows at the time. It was 

right around when | was graduating that | discovered Processing through these 

other workshops that were happening at ITP. | thought, “Oh, this could bea 

platform to teach our Intro to Programming Class.” | was then hired to be aresearch 

resident. It was kind of a third year of being here and doing workshops and 

helping students. We still have research residents at ITP today that do this work. 
So | did some workshops with Processing and then rana little pilot 

test. It was called, Procedural Painting (https://shiffman.github.io/Procedural- 

Painting/). It was, basically, learn to code with Processing, and doing graph- 

ics and animation. So | did that course, wrote a whole lot of tutorials and hand- 

outs for it that | put online on our website. And then once | did that, it seemed 

to go well. Then we incorporated it the next year into our Intro to Programming 

class, and | kept iterating on those online tutorials, and those actually even- 

tually became what is now the Learning Processing book (http://learningproces 

sing.com/). 

It sounds like your involvement in Processing [happened] by sort of taking it on, 

and in creating a lot of materials, and making it accessible in the classroom. 

Yeah. Who's to say what’s an official contribution to Processing and what’s just a 
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Reply #319527, 205, 3220 contribution to Processing. At that time, | 
was just any person on the internet who 
=), was interested and trying to get involved 
with the community. For a presentation 
that we gave at Processing Community Day, 
| found my first post to the Processing 
forum, which is like, “Hello, my name is Dan, 
and I'd like to participate 
in Processing.” 

There were no books at the time. 
| don’t know that there were video tutorials, 
and there were just a few online tutorials 
and materials that were part of the Process- 
ing website. | was able to carve out a lit- 
tle niche there, of, “Oh, I’m writing beginner tutorials with Processing,” and they 
were just flat HTML pages. Most of it was me being panicked and anxious 
about teaching. Teaching the class one or two or three times, | ended up accumu- 
lating this material, and over the years, other people started using that mater- 
ial, and | got in contact with Casey and Ben, and became more involved with the 
project as an open source contributor. 
There’s alot of overlap between the Processing community, the NYU ITP commu- 
nity, and a few other ones. Do you mind explaining contributions that are sort 
of unofficial? How do you talk about the solutions? 
One thing that I’ve been really lucky to have, that not all open source contribu- 
tors have, is institutional support. That support is financial, and it’s emotional, and 
it’s infrastructure. At the time [when | first got involved], | was just aresearch 
fellow, a research resident at ITP. In that sense, my role was to help offer students 
support, and | was also doing that while [I was] teaching myself Processing. 

Now, though, if you fast forward 15-plus years later at NYU, the job that 
| have here has multiple components. There’s teaching, and | use Process- 
ing and p5,js for a lot of that. There’s service to the university, which is running 
student clubs, or participating on committees, and all sorts of other kinds 
of things. And then there’s research, or professional practice. If you’re going 
to be at an arts school, that componentis less traditional in the academic 
sense. It’snot, “Oh, youmust publishallthese papersin these journals.” A lotof peo- 
ple that | work with are practicing artists, or do a lot of other kinds of things. 
| have always made the case that the open source work that | do on Processing, 


htto://wmw.shiffmen.net 
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p5.js, and with the Processing Foundation, is both my research and my professio- 
nal practice. 

That’s one way that helps allow me to do this work in a way that’s sustain- 
able. It has also helped Processing Foundation and Processing projects 
over the years. [Since] a lot of us who work at institutions have mechanisms for 
supporting this kind of work, we're able to basically do it without addition- 
al pay. So, and I’m cautious about saying this, | don’t know that what | do is vol- 
unteer work for the Foundation. Maybe some of itis, maybe it isn’t, but | do 
consider it to be the research and professional practice component of my job 
at NYU. 

That’s something that | feel is really important to be conscientious about 
in open source—because there are other people who are contributing to Pro- 
cessing, who are maybe freelancers or independent artists, and they're doing the 
same kind of work, but don’t have that institutional support—and how can 
we make sure that [those] people can contribute. | want to make sure that being 
able to contribute is accessible to everyone—people who need childcare, 
or people who have different kinds of abilities, can also participate. 

That’s a really interesting discussion happening. But before we jump there, 
p5,js also has a relationship with ITP as well. 

Yes. One of the things that | always try to do if | can, is funnel any types of 
funding or hiring opportunities from NYU towards the Processing Foundation. 
For example, in addition to the research residents who are recently grad- 

uated students, we have a program [for people] in residence. It’s a research fell- 
ow-like program, so independent artists or teachers, or somebody on sab- 
batical from another job for a semester, can come and do a residency at ITP for 
a semester. 

One of the people who has been doing that over the last several semes- 
ters, and continuing this fall, is Cassie Tarakajian (https://cassietarakajian. 
com/). Cassie is the lead developer of the p5.js web editor. This is a project that re- 
quires a ton of time and effort and expertise; a lot of that is technical exper- 
tise, alot of that is community management. There’re so many aspects of the web 
editor project. It really requires funding to keep that project afloat. 

The p5.js web editor is an online platform for creating, editing, and shar- 
ing p5.js sketches. Cassie Tarakajian is the lead developer of the web editor. 

One of the ways we've been able to fund that project, among others, is to 
have a residency for Cassie at ITP, where her primary work is developing the 
web editor. | can make the case for that because the web editor is the primary 
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platform for all of our introductory programming curriculum. This is a way that 
works: for an institution to support an open source project that’s free for 
everyone, but isn’t free to make. 

We need to find clever ways to fund those [projects] beyond just don- 
ations on the Processing Foundation website. This is one of them. And that’s not 
unique to ITP or NYU. Golan Levin (http://www.flong.com/) and the Studio 
of Creative Inquiry (http://studioforcreativeinquiry.org/) at Carnegie Mellon have 
provided lots of similar kinds of support. UCLA [has too], where both Casey 
Reas and Lauren Lee McCarthy are full-time faculty. University of Denver and 
Chris Coleman (http://www.digitalcoleman.com/) have provided a lot 
of support. 

Then there're companies like Ben Fry’s company, Fathom Information 
Design (https://fathom.info/). So this is something: having institutional partners. 
They might be writing a check, or they might be providing a residency, or they 
might just be providing free space. That’s something that’s been crucial and fun- 
damental to how the Processing Foundation has been able to sustain itself. 
| say this because it’s something other people who work at institutions could think 
about doing. Providing residencies, or making sure that, when faculty are be- 
ing evaluated, that if they put their open source contributions, those are equal to 
publishing in closed academic journal-type things. 

Yeah, and so much of the work that has come out of these places with Process- 
ing Foundation has now found its way into schools, to high schools and mid- 

dle schools. [It may be] totally unexpected, but it can happen through open source 
work. It’s hard to see that happen through writing papers, let’s say, or some- 
thing else. 

Right, right. 

It’s had avery large effect. 

Yeah. And | don’t mean to denigrate the writing and publishing of papers. That 
work is very hard and important and meaningful, too. | just view it more as my role 
to advocate for open source contributions as professional research. 

It’s aknown quantity versus “this is hard to capture.” 

We should transition. It seems like a continuation in your journey, but 
avery interesting and new area: You started working on the Coding Train. Do you 
want to tell us what that is and how you got started? 

Yes. Back to your original question about how these pieces fit together, this is 
one that | often struggle with the most, [trying] to figure out where this fits 
exactly. | have my work with the Processing Foundation, and my work at NYU, 
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which is a very specific job. What grew out of these [is] this separate entity, this 
YouTube channel. 

The origin story is that, at some point, | started making supplemental vid- 
eos to go along with teaching my classes here at ITP. Those were in the form of 
screencasts, or in the form of trying to set up a camera in class. And none of that 
really worked effectively. | think both of those things were very useful. If | have 
aclass of 16 students, recording the class was really useful for them, because 
they could go back and look at it. Or doing a screencast that was augmenting 
one aspect of discussion in class, that was super useful too. 

But recording a class was problematic for bringing other viewers in. 
Number one is, | was always very concerned about privacy. | was like, “If a stu- 
dentis asking me a question, should | turn the camera off?” It also inhibited 
people. The classroom, whether it’s three students, or 16, or 50, or whatever the 
number, is a sacred space, in a way. Audio recording, video recording, other 
than for that community's documentation, never felt right to me. So | started ex- 
perimenting with trying to make similar videos that were more engaging and 
were produced outside of class, where | could be in them, talking and engaging 
with whoever the viewer might be, but not the screencast and not in class. 

| started makeshift, setting up some cameras in my office, and | painted 
awall green, and | would try to composite a green screen with computer cap- 
tures. was making videos that way, uploading them to Vimeo. They were supplem- 
ental materials from the class, and they were also a public resource. | was doing 
that for about a year, and then two things happened, which really changed the way 
| was doing that process. One was, somebody emailed me saying they wanted 
to watch the videos at 2X speed, which was not a feature of Vimeo at the time, on- 
lyon YouTube. | had a hundred videos that | then uploaded all at once to You- 

Tube. And two, | started becoming interested in experimenting with livestreaming. 

The system | was using to record videos was using software called 
Wirecast, although now | use an open source software called Open Broadcast 
Studio. Wirecast is commercial software for doing the same thing, for tak- 
ing a bunch of different inputs. | needed a video that was on me, and | needed to 
record the screen; | had the audio from the computer, | had my audio; and 
then | wanted it to be ina green screen so | could composite, but | didn’t want to 
do any post-production. So | used software, Wirecast, or now Open Broad- 
cast Studio, which is similar to what you would use if you were doing a sports 
broadcast, for example. It’s much simpler [if you need] 10 different cam- 
eras to broadcast live and switch between them. | wasn’t broadcasting live, | was 
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just recording everything to disk. But then | realized, “Oh, | could broadcast this 
stuff live.” 

Once | started doing that, two things happened. One is YouTube, for bet- 
ter or worse, was a platform that reached a much larger, more international 
audience. People would find the videos in ways they wouldn’t on Vimeo. So the 
audience started to grow that way. Then livestreaming really created this 
community. It’s not the same as sitting in a class at a university, one teacher, how- 
ever many students. It created this sense of knowing each other, or know- 
ing me, and me knowing the audience in a different way. And so with both of those 
things together-YouTube as a platform and livestreaming—the audience start- 
ed to expand and grow very quickly at a certain point. 

It [became] something of an obsessive addiction for me to keep doing 
it. Some of that is probably the things that | associate negatively with the internet: 
that I’m just optimizing for clicks and views, and you get kind of addicted to that. 
[laughs] Yes. 

But also it was, “Oh, wow, there’s a 13-year-old living in a country that I have 
heard of but know nothing about, who suddenly learned to code and made this 
whole project that they shared with me.” Those types of moments are real- 

ly thrilling and exciting to be able to reach audiences in a totally different way. 

Now, it’s become a little bit of asmall business. It generates some 
income; | spend one day a week doing it. | started hiring other people to work 
with: a video editor, now a community manager. On the one hand, it’s an ex- 
tension of my work at ITP and with the Processing Foundation, because the ma- 
terial is the same material that I’m using to teach. I’m also using Processing 
Foundation software and packages in it. But it’s kind of its own thing as well, in 
terms of being an entity that produces educational content on YouTube. 

One thing | really like about the livestream is watching you think through a prob- 
lem. How do you pick a topic to cover? What kind of research do you have to 

do? Is it like a cooking show where you have a cake that’s ready? | mean, | know 
you're live-coding it, but have you thought through where you're going to go, 
those kinds of things? Do you have one example in mind about how you think 
through something like that? 

| really struggle with this also, because, on the one hand, the thing that | think peo- 
ple have enjoyed or related to the most in what | do in these livestreams, is 

the working through it and getting stuck, and sometimes not being able to solve 
the problem. That is a thing that you do see more now. But when | was start- 

ing making video tutorials, more of what you would find would be well-produced, 
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thought-through, curated lessons. [Now, 
it’s that] people are able to see some- 
body else who they think (whether or notit’s 
true) knows what they’re doing, getting 
stuck and not knowing what they are doing. 
That, | think, is empowering and 
helps people build confidence or realize that 
they’re not alone in struggling. At the 
= same time, if you're searching around the 
internet, and you want to learn how to 


FIG createCanvas returns with Part 2 of our : 
002-03 in-depth interview with Dan Shiffman! Danis  '0ad weather data from an API, and you find 


the beloved host of the Coding Train, the a three-hour video of someone trying to 
vibrant YouTube channel of weekly creative coding tut- figure it out, maybe that’s less useful in the 
orials. Dan has been part of the Processing Foun- moment as a five-minute video that 
dation since before it was a foundation. In Part 2 of the : 
interview, he talks to Education Community Direc- shows the steps. | have not figured out how 
tor Saber Khan about different sustainability models for to strike this balance. But I’m trying to 
open source, the pros and cons of using YouTube do alittle bit of both. 
as a platform, and how the Coding Train is more about Picking topics for awhile was 


community and documentation than itis about tech- 
nical expertise. easy forme, because lhad 10 years of teach- 
Daniel Shiffman holding a ukelele andrainbow ing material, and I’m like, “Let me just 
drawing in front of coding train illustration. go through all this stuff.” But, at a certain 
point, I’ve run out of that. I’m always interested in learning new stuff my- 
self, so machine learning has become a bit of that area that I’ve been teaching 
myself, and then making videos about. That has been driving a lot of the 
new topics. 
And |do happen to get alot of requests or suggestions from the view- 
ers and from the community. 
A good example of this would be the most recent thing that | did: Tic- 
Tac-Toe (https://www.youtube.com/watch?v=GTWrWM1UsnA). [It was a coding 
challenge], just making a simple interactive version of playing the game tic- 
tac-toe. | felt like, “l understand the game tic-tac-toe in my head. Maybe I’ve pro- 
grammed it as an example in a class. This is something | should go in and do 
without thinking about in advance to show that process.” 
“Coding Challenge #149: Tic-Tac-Toe” 
So, it’s on a case-by-case basis. That’s what I’m doing these days: picking top- 
ics that people suggest, which are either a standard topic that you might find 
ina computer science class, or otherwise a fun game or creative idea that some- 
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body threw out there. That’s how | approach these coding challenge videos, and 
those, ideally, range between 10 minutes and an hour, the sweet spot being 

20 to 30 minutes. I'll do those during the livestream, but then | work with a video 
editor. We don’t remove any of the actual writing of the lines of code. It’s im- 
portant, | think, for people watching it after the fact to be able to see the whole 
process from start to finish. But there’s often amoment where I'll be cough- 
ing, or | went down a rabbit hole of trying to figure something out, which is really 
not important in the end. So that will get edited down. That’s, these days, how 

I'm trying to think about these coding challenge videos. 

Hi everyone. Welcome to createCanvas, a podcast about the Processing ed- 
ucation community. I’m your host, Saber Khan, Education Community Director 
of Processing Foundation. [Intro is the same as above.] 

This is the second part of our conversation with DS of Coding Train Pro- 
cessing Foundation and NYU ITP. If you missed the first part, | recommend 
you listen to that as well. You can find that and other episodes on the Creative 
Canvas SoundCloud and wherever you download podcasts. 

By the way, these interviews are part of a new feature on our website, pro 
cessingfoundation.org, called the Education Portal. The portal will have edu- 
cation materials and resources available for free. 

You moved from Vimeo to YouTube, and YouTube is such a sort of cul- 
tural moment both of learning about the world, but also anxiety about what’s hap- 
pening here. 

Does that enter into the Coding Train world? 

It does and it doesn’t. It enters into my thoughts a lot because | have two kids 
who are eight and 11. They spend time watching YouTube. I’m always trying to fig- 
ure out how to manage that; and “should they be watching YouTube?” and “how 
many clicks away are they from inappropriate material or conspiracy theories?” | 
worry about that. So that’s a concern of mine and, in alot of ways, | might pre- 
fer to be on a platform, or have my own platform, that is less part of the giant cor- 
porate mess that is the internet. 

However, for what I’m doing, | don’t know how | would reach that same scale 
of audience, and it has offered me opportunities to generate revenue, which 
make doing this more sustainable for me. So on the one hand, | talk about work- 
ing for Processing, doing that without any additional income, [and how that] 
works because | consider it part of my research practice. 

The same could be said about making video tutorials. | could put them 
out with no ads on them; | do put them out with ads on them, and sometimes | take 
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the ads off, and sometimes | put them back on. | go back and forth between this 
depending on if I’m requiring them for a class. I'll demonetize them for like 
a couple of weeks, then |'ll put it back on. 

It’s allowed me acouple things. One, is | now [at the time of the inter- 
view] have two people [as of this publication, it’s now four] that | work with who | 
pay. Having the income makes that possible. It’s also really a motivating fac- 
tor for me. It helps me get excited about doing it in a certain way, because | know 
there’s that benefit to me coming back from it as well. I’m conflicted about 
this because I’m in a very lucky, privileged position to have a full-time salary job 
at NYU, but | also think of it as, if | can learn how to do this in a sustainable 
way, that generates revenue, then that’s something that hopefully | can model 
for other people who can do the same type of thing. The YouTube platform 
really affords me this possibility. 

| have a backup of all of my videos. YouTube could go down, or YouTube 
could do something really terrible, and | feel like the irony here is, “Where is my 
backup of all my video files?” Oh, it’s in my Google Drive. [laughs] That’s also 
Google. So | don’t know how to manage this. 
[laughing] Yeah. 
I'm kind of like handcuffed in this situation: it’s of great benefit to me, and | really 
enjoy YouTube as a platform and the livestreaming, everything that comes 
with it, but I’m concerned. 

Anybody who has thoughts about this, | would love feedback, or to 
hear from [you], to make sure that I’m doing everything in the best way that | can! 
It also seems to have a very interesting, vibrant community of creators, espe- 
cially in the area you work. 
Right. 
Have you met other peers doing similar work? 
Yes. This has been one of the most fun aspects of doing this on YouTube. | feel 
like | have been part of acommunity—whether it’s the ITP community, the Proces- 
sing community, or open source—for years, but only in the last couple of years 
did | discover this other community of educators on YouTube. Most of whom are 
the most well-known ones [who] are not doing computer coding. 

I've gone to some events; | went to something called EduCon, whichis a 
gathering of people who make educational video content. | went to some- 
thing called ThinkerCon (https://www.youtube.com/watch?v=UXq1VFWTQE0& 
feature=youtu.be), which was in Huntsville, Alabama, which was, again, a sort 
of conference and gathering of people. I’ve met a lot of really amazing, phenome- 
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nal, talented people who make science, math, and other kinds of educational vid- 
eos on YouTube. 

Learning from them, meeting them, and trying to figure out ways to do 
collaborations has been great. That is also an answer to one of your other 
questions that | forgot about, which is that a primary way | get ideas is [by] watch- 
ing alot of other educational YouTube creators and thinking, “Okay, so| just 
watched....” For example, the image of the black hole was recently published, [and] 
avery well-known YouTube channel called Veritasium, which makes a lot of 
physics and science videos, made a whole video about that image [which you 
can see here (https://www.youtube.com/watch?v=zUyH3XhpLTo&feature= 
youtu.be)]. Watching that video [| thought], “Is there a way | could code an exam- 
ple that would go along with it?” That’s how I see my role. 

There’s a YouTube channel called 3Blue1Brown (https://www.youtube. 
com/channel/UCYO_jab_esuFRV4b17AJtAw), which does a lot of math and 
physics educational videos with animations and all sorts of amazing, beautiful 
explanations. My skill is never going to be making such beautiful, eloquent, 
concise explanations of really complex topics, but | can sit and struggle through 
coding one of those topics. In a way, what! can do, is be acompanion serv- 
ice to some of these other YouTube channels, where people who are watching 
and learning and getting excited about a topic, could find a coding video that 
goes along with it. 
| think that’s really to another point about what coding offers. Someone's 
worked out the math and the science behind it to play with it. It’s great to be ina 
coding base for a lot of people so that you can watch it happen or play with 
the variables and things like that. 

Yeah and for me it’s always been a way of understanding something that | 
thought | wouldn't be able to understand. 

Maybe this is a good moment to talk about the thing you hinted at: mldjs 
(https://ml5js.org/). What is that project? What’s happening there? How’s it con- 
nected back to some of the other things you mentioned? 

Yeah. So, mld (https://ml5js.org/) is a JavaScript library. It started for a couple 

of different reasons. One, is it started out of a grant that | applied for from 
Google (speaking of Google, everything in my life seems to tie back to Google!). 
Google has something called Google Faculty Research Awards, | think that 

is the name of it, that you can apply for if you teach at a university. 

Dan’s series of video tutorials on ml5.js comprises 11 videos (as of 
now) and teaches the concepts behind machine learning using the ml5,js library. 
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At the time, Google was coming out with something called DeepLearningJS, 
which is now TensorFlow,js, which is an open source JavaScript library for 
machine learning. | wrote a grant proposal to say we wanted to make beginner- 
friendly examples for people learning to code with things like p5.js, to be 
able to use TensorFlow.js and be able to learn about machine learning and cre- 
ative coding. 

That ultimately became more than just a set of examples. It also became 
alibrary called ml5, which is just a wrapper around TensorFlow,js that pro- 
vides access to a lot of the functionality, but without the requirement to do some 
of the lower-level things you need to do when you're working with Tensor- 

Flow,js directly. That library exists as a standalone project developed at ITP. Most 
of the contributors are ITP students or researchers, but there’s been a lot 
of outside contributors as well. 

This recent video introduces Teachable Machine 2.0 (from Google 
Creative Lab). “Train a computer to recognize your own images, sounds, and po- 
ses,” using p5.js with the ml5.js library. 

Two students from Parsons this year joined the project and then helped 
design the new ml5.js website. That project, it’s kind of grown and sits 
alongside, almost as like a sibling project to pd. It’s not officially part of the Pro- 
cessing Foundation, but there are a lot of the same people working on 
both of those libraries and p5 and mld work well together. 

I'm teaching anew class this fall, and I’m hoping to use mld and Tensor- 
Flow.js and something else also called RunwayML, which is another separate 
project, but those three platforms as the primary engines for this course, in 
which case I’m hoping to make a lot of new video materials and make a lot of new 
tutorials about [them] as well. 

That’s great. It seems like there’s a way to understand what it is that you do, which 
is this desire to create stuff for your classroom that has led you down many 
different roads, the Processing Foundation, Coding Train, ml5. 

Right. 

What’s your hope for the direction Processing Foundation’s headed in? Are 
there things that you're looking forward to at Coding Train? I’d love to know what 
the future holds. 

That's a great question. One thing that, it’s not really to answer your ques- 

tion, but one thing that just struck me, that’s come into focus through this con- 
versation, is | feel like the common thread throughout all of these things, 

in away, is that last mile (or kilometer, | try to use the metric system whenever | 
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can!). There are so many things out there, 
like TensorFlow.js—to name the one 
= that’s most recently talked about—that do 


“ga all of these amazing technical gym- 
g nastics, and they shouldn’t necessarily. 


_. q Youcan'tdo it all. If you're the peo- 
? ple developing TensorFlow.js, you have to 
focus on what you are focusing on to 
make that thing work, but there’s this little 
cities of Processing Community Day World- Gap of Somebody who is a high school 
wide 2019. student, or a lifelong learner in their sixties 
Google map with markers all over the world. whois sitting on the internet and 
knows alittle bit about coding, and cannot figure out how to get what they’re 
working on to attach to this new thing. | feel like, for me, my videos try 
to do-it’s not technically complicated work necessarily—it’s more community 
work and documentation work, and being thoughtful about the language 
you're using to bridge that little gap there. | think the p5 Web Editor that Cassie 
Tarakajian leads [here’s a short video intro (https://www.youtube.com/wat 
ch?v=dtHxDggkBYc&feature=emb_logo)], is a project that does this as well, be- 
cause I've encountered so many people who say, “Okay, | sort of get what 
you're talking about in these four lines of code, but | don’t know how to put those 
lines of code on my computer and run them.” 
Mm-hmm [affirmative]. 
Being able to do that work is so fundamental and crucial. Thinking back to 
your question, my hopeis for more of that, and especially more that’s targeted 
towards communities, of people who have historically been left out, or 
who don’t have access; or materials haven't been written with them in mind; 
whether they’re not seeing themselves represented in the people who 
are presenting this stuff, or there’s just been no one who's come to their city or 
community to do a workshop. 

That's one of the things that | know began with Processing Community Day 
(https://processingfoundation.org/advocacy/processing-community-day- 
2017-2019), specifically Processing Community Day Worldwide (https://proces 
singfoundation.org/advocacy/processing-community-day-2020). Having 
these events in cities that are places that aren’t just New York and Los Angeles, 
or other similar international cities, but really being able to reach beyond the 
people that I’m used to seeing and talking to. 


Map showing the 100+ registered node 
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| think we have to find ways of bringing more people to the table, not just like, “oh, 
we're running workshops in these cities,” but that there are people who are 
planning which cities, who are from those cities, and from those communities. 
That’s really what I’m hoping for. | think YouTube does that in some ways, 
because it reaches people in international audiences. If you have a phone, but 
don’t have a computer, if you have an internet connection, or a mobile con- 
nection, you can find these videos and learn about this stuff. But it doesn’t reach 
people in other ways that having a local meet-up can. Or something that’s 
funding people to work on open-source contribution, paying them to do, like, a 
two-week project, and mentoring them. That’s not what Coding Train does. 

| feel like the university, NYU as aninstitution, offers something to a cer- 
tain audience, YouTube offers something different to a different audience, 
and Processing Foundation also, hopefully, can be a place that can bridge a lot of 
those gaps of audiences who are being left out of those two things as well. 
That’s great. One of the reasons we're interviewing you aside to hear all these 
things, is to launch our Education Portal (https://processingfoundation. 
org/education), which is onthe Processing Foundation website, to help people 
get started by themselves or in their classroom. 

From all that stuff you mentioned, is there a particular place [someone] 
should start? Is there a particular video or a playlist that you recommend? 
There are many places on the internet that you can find to get started. I’m always 
speaking about my stuff because it’s on the front of my mind. | don’t want to 
recommend it over the other wonderful tutorials and starting places that are out 
there. | do have a playlist. It’s called Code! Introduction to Programming with 
p5,js (https://www.youtube.com/watch?v=HerCR8bw_GE&feature=youtu.be). 

This video series teaches the basics of programming with p5,js for 
beginners, and includes seven tutorials so far. 

That’s the playlist that is meant to be for someone who’s never 
done any of this before. The only requirement to follow along is that you have 
aweb browser, because it’s assuming you’re going to use p5 Web Editor. 

At present [the web editor] doesn’t work on mobile or tablet very well (maybe in 
the future it will). So that’s the starting point. 

One of the things that I’m most excited about with the Education Portal, 
is a way of aggregating more of these, because | know there are other peo- 
ple who either have written tutorials or video tutorials that are for total beginners. 
Being able to have a repository of some of that stuff for people to find things 
more easily is super important. 
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Also, | think what’s really important that we’ve been doing a better job with, espe- 
cially with the work that you’re doing, is talking to teachers. Because when 
|found Processing in 2003, itwas primarily being used in graduate school environ- 
ments, art school environments. Especially with what Lauren McCarthy and 
the p5.js community have built being JavaScripted in the browser, again, and 
even Processing wasn’t that originally, it wasn’t JavaScript that was in the 
browser originally, it’s finding its way into K through 12 education. That wasn’t the 
expertise or the experience of a lot of the core contributors and developers 
of processing in p5jjs. 

There are things that a teacher will say to me, like, “If this was in the 
web editor, this would solve all these problems we have.” It seems obvious after 
a person has said that to me, but I never thought of it beforehand. Being able 
to have those kinds of conversations and feedback from teachers, and having 
them be part of the development and design process, through the Educa- 
tion Portal, is a really important thing. 


SK — Great. Thank you so much. Thank you for joining createCanvas. Once again, 
I'm your host Saber Khan. createCanvas is produced by Processing Foundation 
and supported by the Knight Foundation. Our editor is Devin Curry. Special 
thanks to the Processing Foundation board and staff. 
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PER Makingpd.js, 2021, 

003 Lauren Lee McCarthy. 

They want us to think technology is a black box. Accept the terms of service. You can't 
know what’s inside. You can’t modify it. You certainly can’t make your own. 

We didn’t believe it, so we made p5.js. Making p5 meant starting with deep uncer- 
tainty and many questions. Becoming comfortable with not knowing, with making 
mistakes, with always being in a process of learning. Following each question until it led 
us to many more. 

How do you get started with something new when you're scared? 

How do we ask for help? 

How do we think about making a tool? 

Which users do we prioritize? 

What assumptions are we making about them? 

How do we organize our code? 

Can we value every type and size of contribution? 

When do we trade performance of our tool for legibility of the source code? 

How do we elevate the role of documentation? 

How can we teach people to use the tool? 

Which language are they speaking? 

Which words are we choosing to use? 

How do we make decisions with a large group of people? 

Can we make space for many different people to lead? 

How do we acknowledge the endless amount of emotional labor required? 

How do we support each other? 

We were artists, designers, coders, writers, organizers, teachers, students, beginners. 
We were contributors. We could see that our open-source project had so many more 
needs than just code. We needed people to write tutorials and documentation and web- 
site text. To answer questions on the forum and respond to issues on GitHub and an- 
swer emails. To create curricula and examples and livestreams and teach people how to 
use it. To reinterpret the project in other languages and cultural contexts. To test and 
build out web accessibility for disabled users. To work with their local communities to or- 
ganize workshops, meetups, exhibitions, community spaces, community days. To 
share code and ideas through their artwork. To organize contributor conferences and 
draft the p5.js community statement. To work through conflicts and different opin- 
ions. We needed people who could recognize the time this work requires, and the need 
to pause sometimes. 
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No tool is neutral; each is built with the beliefs and biases of its creators. We were mak- 
ing a tool for creative expression, so it felt especially urgent to have a wide diversity 

of perspectives contributing to its making. We were constantly thinking about commu- 
nity, and the barriers to entry. How do we welcome someone? How do we keep up- 
dating our understanding of access? 

Who is being cut out by the “getting started” tutorial that’s too confusing, by 
the tone of communication online, by the use of English language, by the lack of a com- 
puter or internet connection, by not seeing people that look like them hold roles in 
this community, by content that is inaccessible to disabled people, by not having the fi- 
nancial means to volunteer time? 

We felt the uncomfortable contradictions of trying to make this project within a 
capitalist framework as we dealt with the realities of a lack of time and resources. 

We got things wrong and got hurt and got burnt out. We reminded ourselves: /t’s always 
an option to throw our laptops into the ocean and bow out, but we have chosen not to. 
Making with p5,js was believing you could make things with other people. We could keep 
trying, iterating. We were building on decades of trying and learning from teachers 

in other communities. Processing, School for Poetic Computation, openFrameworks, 
Design By Numbers, Arduino, Wiring, three.js, POWRPLNT, Afrotectopia, PyLadies, 
Design Justice Network, and many others. 

But we also wanted this to be a project where you could bow out. As much 
as we prioritized making it easy to enter the project, we wanted it to be just as easy to ex- 
it. To open space for others, and open space for yourself to do new things. To be a 
part of the community even after you've signed off. 

We began rotating the project lead. We held an open call process where we 
asked how this position could support learning for the lead as well as the community. 
Could the community provide collective mentorship? Moira took over, and then 
passed it on to evelyn and Qiangian. They have each brought new questions to p5,js, 
stewarding it on a path forward from the 1.0 release that explicitly centers access 
in every new feature. 

Through the years working on p5.js, | realized | am much more comfortable 
writing weinstead of /, Because every part of this project feels like something | learned 
from someone else. A million little gifts from different people merged into a library 
and acommunity. Yet there were also moments where | felt alone and unsure, and | know 
many others felt this, too. p5 is remembering you have other people you can ask to 
work through the questions with you. We set our own terms. p5 is everything we learn 
from each other when we make ourselves open. 
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PER | title? #58, 2020, 
004 Casey i" 
Ry ARs. ak ‘ty 2 R Rs -, | was around for the birth of p5.js and I’m 
6 Ss ) around now for the 1.0 release over six 
" years later. My greatest contribution to the 
, Project was to keep my nose out of it. 
. * Through Lauren’s guidance and energy, 
p5.js has grown into something com- 
, pletely different from its parent, Processing. 
" Both projects share the same domain 
q and emphasize community and learning, 
but p5.js imagines a new, refreshing 
RRL @ Rey i & approach to situating coding within the arts 
Be ~ and vice versa. Processing’s core is 
rooted in the culture at the turn of the cen- 
RE By RARE iL w., Q r & , tury and pd.js points beyond 2020. : 
: es As | was thinking about the p5,js 1. 
7 iw 4 Lee 3 BS release, something brought be back to 
004-01 Algorithmicallygeneratedblackandwhite te early days—to 2013, Some email search- 
image of beaker of water with sunlight, ing to jog my memory led to a GitHub 
showing the open and close isolated systems in issue started on August 29 with the name 
thermodynamics through 2D graphics. “title?” The text that follows below is 
an edited discussion about how to name the nascent project that would become what 
we know as the amazing p5.js. 

The cast of characters are Evelyn Eastmond (@evhan55), me (@REAS), Lauren 
McCarthy (@Imccart), Chandler McWilliams (@brysonian), Erik Blankenship (@jedi- 
erikb), and Dan Shiffman (@shiffman). The full discussion is here (https://github.com/pro 
cessing/p5.js/issues/58). 

title? #58 
evhand5 opened this issue on Aug 29, 2013-19 comments 
evhan55 commented on Aug 29, 2013 

@lmccart 

What is the official name of this library? 

ProcessingJS 

Processing-JS 

Processing-js 

processing.js 
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processingjs etc... 
How are we differentiating from Processing.js? 
Keeping track of Processing, processing.org, Processing.js and processingjs. 
org and now this new library is going to be really confusing to many people. 
Perhaps something to bring up in the September 4th/5th meeting? 
REAS commented on Sep 11, 2013 
Right now, I’m leaning toward the minimal “P5” as the project name. I’m still fond 
of “Ciel.” I’m curious about what the RISD grads might come up with. 
Imccart commented on Sep 12, 2013 
hm, itis an abbreviation for perl 5, but | think not too much googling overlap there. 
brysonian commented on Oct 10, 2013 
p5js has a lot of results, and p5js.com so that might not solve the confusion. | 
can't come up with much either though. | did like the name Cing for that cpp 
project that was going on. Maybe something similarly odd/nice sounding? jxing? 
jedierikb commented on Oct 10, 2013 
pojd ? 
has anice r2d2 ring to it. 
REAS commented on Oct 10, 2013 
My daughter says “3PPO” instead of C3PO. | wonder what we can learn from that? 
brysonian commented on Oct 10, 2013 
ppppp.js 
shiffman commented on Oct 10, 2013 
i think if you put a P in front of it, it will be perfect. 
Imccart commented on Oct 11, 2013 


evhan55 commented on Oct 25, 2013 

The RISD grads haven't really chimed in, unfortunately. They are still getting 
a grasp of the difference between Processing, Processing.JS and this new ver- 
sion, and none of the students in my section have suggested alternatives. 

lam starting to lean towards “P5” but not exactly fond of “ppppp,” itseems 
like a mouthful and beginners might wonder why. Also still really like ‘Ciel’ 
or anything completely different and fresh, but since this library builds on the 
Processing API so closely, the tie to ‘proced5ing’ seems nice. 

Although a quick Google search... http://www.sojamo.de/libraries/ 
controlP5/ 

Is P5 used in other places to refer to Processing? 
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brysonian commented on Oct 25, 2013 
It was for years, not as much anymore. Something simple like draw.js might be 
nice too. 
REAS commented on Oct 25, 2013 
.. After receiving so much negative feedback about the name “Processing” 
over the years, | think common usage language names are tricky. However, may- 
be the advantages of the simple “draw.js” outweigh these negatives. @ev- 
hand5, people naturally named Processing libraries with “pro” and “p5,” but we 
discouraged them because it made them feel “official” rather than “con- 
tributed.” | don’t think this is an issue for your project. 
Imccart closed this on Nov 1, 2013 
jedierikb commented on Nov 1, 2013 
And... The title is??2? 
Imccart commented on Nov 1, 2013 
| believe we have settled on p5.js. @evhand5, is this right or is this still tentative? 
evhand5 commented on Nov 1, 2013 
p5.js :) 
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Content Aware Collage, 
005-01 Social network model illustration depicting 


why ilove p5.js and how did i get here, 2020, 
aaron montoya-moraga. 


| & psJjsis my favorite community, people, soft- 
6 |, 4 Ware, tool 

“= let me first explain my journey so far, and 
© /e7 highlight great people i have met 

~~). 2011 iused to be a struggling electrical 
engineering undergrad 

professor Rodrigo Cadiz who invited 
metoacomputer music workshop 

i learned we could use code for arts, 
and met a beautiful community 

of media artists 

2012 istarted learning Processing 

: and still didn’t understand what free 
libre open source meant 
interpersonal ties through two-dimensional 2013 artist Margarita Gomez showed me 


at eet 


Alice Mira Chung. 


lines, circles, dots, arrows, cylinder and words, e.g. openFrameworks and i couldn't 
absent tie. figure out how to use it 
2014 performance artist Maria José Contreras hired me for my first job as a pro- 


2015 


2016 


grammer for arts 

imet Delight Lab and they taught me some video mapping, i was hooked 

iwas accepted to NYU ITP, a two-year graduate school media arts program 

it was the first time they taught p5.js to first years instead of the usual 
Processing 

we learned how to program cool wacky interactive websites and how the inter- 
net worked 

since theni haven't stopped using p5.,js :) 

i took my favorite class at grad school, Lauren McCarthy's Performing User 
check it out, itis amazing https://itp.nyu.edu/classes/performinguser/syllabus/ 
at engineering school ihad been taught programming as an useful skill for 
making money 

at art school i was inspired by the creative potential of computers 

i became convinced artists and society would benefit from using code as acre- 
ative medium 

one of my biggest privileges has been learning English and through that, access 
to education 
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but if you don’t know English, i guess it’s hard to know what you're missing, 

like p5,js 

i wished kids from Spanish-speaking communities would have no barriers to 

their arts education 

i got a grant from the Processing Foundation that summer 

my proposal was to translate to Spanish the p5.js website and book, and teach 

workshops 

the website i18n had been started by Maya Man and i learned so much from 

her work 

i did rough translations of the book and website, buti felt ishould do more 
2017 after grad school, ispent that summer finishing the translations 

Lee Tusman mentored me, Daniel Shiffman and Rune Madsen helped with 

code for the book 

Taeyoon Choi translated the artwork, Tyler Yin and Casey Reas made the book 

a reality 

i explained to Dorothy Santos, Lauren and Casey that the book should be on- 

line,in both pay-what-you-want PDF and optional physical copies 


and that all the source code should be available online for everyone to contribute 


they were encouraging and made this dream a reality 


here is the source code https://github.com/processing/p5.js-getting-started-es 


and the PDF and link for ordering physical copies https://processingfound 
ation.press/ 
iwas hired by NYU ITP to stay for one academic year as a research resident 


with four of my best friends we started a media arts school called CODED Escuela 


Camila Colussi, Natalia Cabrera, Guille Montecinos, Christian Oyarzun 


together we taught p5.js in Chile and fostered the Chilean media arts community 


2018 irepresented Processing Foundation in Argentina for the + CODE Festival 
people were so excited to learn p5.js and celebrating media arts 
2019 ihelped organize and taught at the Processing Community Day in Quito 


Ecuador with friends Gabriel Andrade, Ava Huang, Sharon Lee De La Cruz, An- 


drés Colubri 
ijoined MIT wherei am creating open-source tools for arts and learning digi- 
tal rights 


i attended the the second p5.js contributor’s workshop and worked on the glo- 


bal track with Yasheng She, Qianqian Ye, Kenneth Lim, Luis M-N, and so 
many others! 
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we helped each other figure out the role of p5.js ina worldwide context and 
discussed the sociopolitical aspects of software, of media arts, of sharing 

2020 intwo months iwill go again to PCD in Ecuador with Francesca Rodriguez-Sawaya 
shout out to Saber Khan for organizing Processing Community Day 2020 
everyone i have met through p5.js and Processing has been inspiring and caring 
they advise me to please don’t burn out, to please self care, and enjoy the 
process 
one of my favorite moments ever was when Francesca tagged me on a picture 
of the p5.js book in Spanish being used at schools in NYC to learn media arts 
thank you p5,js friends for caring about each other 
thank you for making this world a happier more ethical place with more art 


‘ 
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PER Oddkins, 2020, 
006 TaeyoonChoi. 


FIG This drawing by Taeyoon Choi was originally 
006-01 commissioned for the Getting Started 

with p5.js book by Lauren McCarthy, Casey 
Reas, and Ben Fry. 

Computer generated illustration depicting 
networks done by Taeyoon’s hand drawings, showing 
the interconnectedness of computers and humans. 


I'm an oddkin of p5.js contributors. Oddkin 
is aword Donna Haraway uses to des- 
cribe an unlikely intimacy. The word oddkin 
captures the essence of friendship 

| have in personal life, intellectual kinship 
with my students and peers at the 

School for Poetic Computation and in the 
geographically diverse nature of the 
Processing community. I’m bilingual; it’s 
natural for me to try to translate the 

word into Korean. | looked up kin, which is 
#/% (9M in Chinese). | don’t think the 
word oddkin is translated into Korean. | 
asked if anyone would help translate it, 
and the media artist Masayuki Akamatsu 
suggested 7| ets F (We fl in Jap- 
anese). It doesn’t have the earthy, crittery 
feel of oddkin, but it’s close enough. 

In this essay, | take an opportunity to think 
about you, my oddkins. 

Dear oddkins. I’ve been lucky to par- 
ticipate in and help with the p5.js contri- 
butors conference at the STUDIO for Cre- 
ative Inquiry in 2015 and remain a fan 
of the project. Some of my colleagues and 
students say they are trying to “demo- 
cratize” technology by making tools or re- 
sources. I’d like to challenge the im- 
plications created by the use of the word 


“democracy” in this context. “Democracy,” unlike “accessibility,” implies a fair distri- 
bution of power, representation, and equity for everyone, but is complicated by ongoing 
questions of citizenship. How many times have you heard a hacker say, “| made this 
open source tool. Now everyone can do what | do!” What they don’t say is that to use it, 
you need to be technically fluent, accepted as a technical person, and have access 
to computers and networks. In reality, tools and resources alone cannot be democratic. 
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What the p5.js project has done differently from the beginning is demystify stereotypes 
of who is seen as technical and/or artistic—the myth of the lone engineer capable of 
creating a powerful framework—and create a technical community where non-technical 
contributions are valued equally. This approach is truer to the reality of software and 
hardware development. There are almost always non-technical contributors who are in- 
tegral to the success of any technology, including but not limited to writers, educa- 

tors, testers, designers, and Quality Control professionals. 

The questions of whiteness in the technology field remains. I’ve attended 
numerous software and hardware conferences over the years. Some were highly exclu- 
sive and self-selective, others were open and inviting to the newcomers. In the U.S. 
and Europe, the conference attendees were dominatingly white males. | could write a 
book about the troubling experiences I’ve had and witnessed at tech conferences. 
Older, established, white male engineers and academics making rude comments to fe- 
male, gender non-conforming, people of color might need a few chapters. Young 
tech dudes promising to solve the world’s greatest challenges with code. “Introverts” 
who are actually just snobbish, escaping to their devices to avoid human contact 
but invasively stalking women with confidence. The most insidious forms of racism that 
happen offstage. How our speaker badge isn’t enough for us to enter the speakers’ 
lounge, how white bartenders treat us with offhand racist jokes, how we are tokenized 
for photo opportunities and a shout out on diversity statement. They can all get a 
chapter of their own in my book. 

To survive in white spaces as a person of color, | learned to adapt to the ex- 
pectations of others at first. Once | felt grounded, | leveraged my place to give voice to 
the others. Speaking up my truth made some people uncomfortable and | may have 
lost some opportunities. Speaking up brought me the respect of others, especially those 
who hold the power in white spaces. 

How does one speak up to challenge the establishment? | think nuance and can- 
dor are essential to start a conversation. No one likes to be criticized, but everyone 
loves to be understood. When | was learning to code, a friend told me “treat your compu- 
ter like your younger sibling.” This approach of care and play is essential in explor- 
atory and poetic computing. | think a similar approach is necessary to navigate the tech 
community. As the p5.js project grows in its scale and diversity, | want to ask, “who 
do we make our oddkins?” 
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PER d.js as a Family, 2020, 
007 Aren Davey. 


childhood and teenage years. By de- 
signing, crafting, and building, | morphed 
my wild imaginations into tangible 
objects. Intricate patterns and inventions 
sprung from my daydreams in my high 
school classes. | honestly wanted to choose 
graphic design or architecture for my 
career path, but since | did very well in the 
maths and sciences, my family pushed 
me towards those fields instead with the 
reason that they didn’t want my talents 
to go to waste. Since | didn’t want to disap- 
point them and | actually had an inter- 
Si faeaeiniaca hasan AaIinstRORERIO est in engineering and scientific research, 
Wr-01 Miaaininocontusesend  'Promised that'd. gotocolegefora 

Algorithmically generated illustration of a degree in that field and almost completed 
centered radial hexagon sequence coveringtheentire every math class my high school offered. 
canvas with a white to light gray color rhythm. | also arrived at school almost an hour ear- 
lier for extra art classes, completed many studios, and did independent art study. 
Whether my intense motivation was to expand my interests or an act of small defiance 
is up for discussion, but my art practice has always been seen as an afterthought. 
Thus, | started to innately see it as an afterthought as well. 

Quite frankly, the p5.js community is not a group that | expected myself to be 
in. Having been intrigued by the concept of Processing and p5.js, | used the platform for 
my school work and expected that to be the extent of my involvement. Then through 
a string of chance happenings, | ended up at the 2019 p5.js Contributors Conference. | 
immediately felt out of place because | didn’t really feel like | deserved the title “con- 
tributor’”. Like, | was 21, still in college but hanging on for dear life, and felt invisible com- 
pared to the other contributors who had a pretty substantial Twitter presence and 
were speaking at or hosting large conferences like Eyeo, maybe SIGGRAPH. I'd be en- 
tirely grateful if | could just see the door to the SIGGRAPH exhibition hall. One of the 
other attendees happened to be a visiting professor who was teaching aclass that | was 
enrolled for the upcoming semester. All of these people were doing great things that 
were impacting the p5.js community and beyond so | didn’t feel like | deserved to be on 


\ Creatingis a verb that | find describes my 


j 
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the same level as them. Creating was only applied to projects that | finished for a grade, 
so | hadn't ever done anything that | designed and executed myself. Thus, | felt pret- 
ty lost and doubtful if | could ever create anything for this community. 

But after receiving the feedback that | got from pitching an idea that | had sit- 
ting in my head for a few months, creating avery dirty alpha for that idea, and seeing a vis- 
ible, tangible, actual product sprout from that, | finally felt like a contributor. | saw that 
my art practice was taken seriously by others and there was genuine interest and need 
for it. Both of my interests, software development and fine arts, were seen of equal 
value and status. One wasn’t inherently better than the other, but instead they are both 
appreciated and valued in their own way. The p5.js community is a place where that 
holds true, so I’m glad that they have accepted me and that | have the chance to give 
back to them. 

| sometimes prefer to call the p5.js community a family instead. It’s more tight- 
knit than other online developmental communities and its members are genuinely 
interested in the progress and evolution of others. | might not have the same amount of 
experience as most of the members, but that doesn’t make me less of a contributor. 
Everyone here is ready to assist others who need it and ensure that they go to places that 
they have never thought of before. This family exposed me to things | wouldn’t have 
seen without their help and has helped me develop as an artist and a contributor. No 
longer is my art practice felt as an afterthought; it is a significant piece of myself 
that is worth exploring, developing, and investing in, and I’m very glad the p5.js family 
helped me come to that conclusion. 
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PER pd Fellow Experience, 2020, 
008 = Stalgia Grigg. 
“Yah y RW, SS 8 S28 TES =<: During 2019, | served as a fellow for p5,js. 
‘~~ During the year | was given the oppor- 
» tunity to operate as a co-leader for the pro 
“ ject. This meant that | was given agency 
* and responsibility in everything from main- 
taining the open-source codebase and 
developing a vision for future governance 
© to designing the documentation for wel- 
, coming new contributors and honing the re- 
- lease roadmap based on the community 
« mission. | have beena contributor to p5 for 
" several years now, but it wasn’t until my 
CR a "experience with this fellowship that | finally 
TOL erent are Colage, Alice Mira hung. understood the significance of the ex- 
- ggregation of short arrows, curvy lines, and ; ; 

strokes with an air of fluidity and garden- ample that ps is setting. 
like illustration. Patterns exhibited are based on emer- My path as a software developer 
gent behavior patterns of fish schools. has been closely aligned with p5 from the 
beginning. My first experiences coding were with p5. | first encountered a for-loop in 
the late nights poring over the online reference and examples for the p5 library as | made 
small experimental creative sketches. This began a lifelong dedication to and love 
for the craft of programming. That dedication led me to become a contributor to the pro- 
ject. | learned how to work on an open-source project through my engagement with 
p5. | can say confidently that if it weren’t for the generous patience and understanding of 
the p5 community, | would’ve been too intimidated or discouraged by my early mis- 
takes to push through and achieve confidence in my status as acontributor. The p5 com- 
munity offered a sense of comfort in learning through doing. This meant that | was 
able to learn a more advanced approach to software development and library architec- 
ture design, but it also meant that | learned by example how to be a steward for a web 
community. This process of learning eventually culminated in my experience as a fellow. 

As a fellow, the responsibility that | was given gave me insight into the inten- 
tion that forms the overarching shape of the project. p5 offers every possible avenue for 
involvement and empowerment. It offers a vast library of supporting educational res- 
ources so that people can learn how to code by making things. It offers asite for consider- 
ation and discussion of how a radically inclusive software project can be a political 
act. It offers an intimidation-free, encouraging space to experiment with open-source 
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contribution. It offers a flexible vision and malleable governance that empowers any 
contributor to reimagine the future of the project. All of these different angles for 
engagement are made available to anyone who shares a passion for p5’s mission. This 
forms an entire ecosystem that works tirelessly to empower people who have been 
historically left out of the conversation of how software tools and the open web are built. 
My deep engagement with the p5 community led me through all of these different 
angles over time, giving me the gift of a path from self-taught coder to community-lead- 
er, software advocate, and mentor. 

My experience as a p5 fellow has been formative in my understanding of how | 
want to interact with the world as a software engineer, tool-maker, developer, and 
activist. The approach that p5 exemplifies, community-forward and porous, is one that 
will fundamentally inform my future work organizing projects that fight for a radically 
inclusive and definitively open web. I’m glad that they have accepted me and that | have 
the chance to give back to them. 

| sometimes prefer to call the p5.js community a family instead. It’s more tight-knit 
than other online developmental communities and its members are genuinely inter- 
ested inthe progress and evolution of others. | might not have the same amount of exper- 
ience as most of the members, but that doesn’t make me less of a contributor. Every- 
one here is ready to assist others who need it and ensure that they go to places that they 
have never thought of before. This family exposed me to things | wouldn't have seen 
without their help and has helped me develop as an artist and a contributor. No longer is 
my art practice felt as an afterthought; it is a significant piece of myself that is worth 
exploring, developing, and investing in and I’m very glad the p5.js family helped me come 
to that conclusion. 
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PER Howto Write Non-Violent Creative Code, A WIP Introduction, 2019, 
009 Olivia McKayla Ross. 


‘ During the 2019 p5,js Contributors’ Con- 
erence, a group formed to discuss 

~ how radical inclusion, decolonization, and 
_ adecentering of dominant communi- 

t ties could be further integrated and empha- 
sizedinp5.js as a toolkit and a commu- 


— 


= nity. We acknowledged and discussed the 
¢ ways in which p5.js is built upon (and 
benefits from) colonial projects like the En- 
glish language, the internet, and their 
elated infrastructures. 
‘ It’s always an option to throw our 
laptops into the ocean and bow out, but we 


& BEN Po ea) Z 


FIG Content Aware Collage, Alice Mira Chung. have chosen not to. i 
009-01 Gray background with monochromatic We agreed to strategize how we as 


brush-like strokes created from an InPainting practitioners and toolmakers can reindi- 
algorithm using a blend of stock photo images of water. genize creative coding, starting in the areas 
where we have the most agency—ourselves and our works. 

“Reindigenization is not a repeat of the past, it is the revolutionary/evolutionary 
RETURN to ways of life with and for the land.” 

Drawing from acollective list of references, we've drafted a set of guidelines, que- 
stions, and prompts to help us and others reflect and refine our work in this spirit. 

The term “nonviolent creative code” was proposed to guide this work. In this con- 
text, we use the term violence to include actions that keep us from the earth, from 
ourselves, and from each other. 

Honor the Land 
Who is the community that lives here? Who is the audience of your work? Are those two 
populations different or the same? Why? 

Are you living or working on occupied land? Who is the indigenous population 
where you are? 

Is this art taking up material space? How have you considered managing the waste 
generated by this project? 

Consider the materiality of the server, the data center, the cable, the rare-earth 
mineral mine, the factory, the oil field, the air conditioner, and the other things that 
are holding up this practice. Where can you decouple those links? 


= 
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Whatis lost when reduced to data? What is there about your place that is not saved in the 
online database or archive? How does it feel here? 

Honor the Body 
There is an assumption that writing and coding are leisurely because you're sitting, 
but there’s also posture issues, carpal tunnel, etc. Take breaks, drink water, protect your 
eyes, etc. Honor your body cues as data. 

Whose bodies have contributed to your work? Who answered that question on 
Stack Overflow, who made this font, who assembled your computer? How are those 
bodies visible or invisible? 

Does your work respect all participants’ body sovereignty? Some particip- 
ants may not wish to be photographed, recorded, scanned, or touched. How are you hon- 
oring these sacred boundaries? 

Honor the Small 
Does your project need to scale? What would your project gain from specificity? 
De-emphasize growth as a goal of a project. Instead, think of growth as one of many de- 
sign principles. 

Can you produce or share work on a large platform (Twitter, Instagram, etc), with- 
out doing work for that platform? How can you decouple your online practice from 
tech giants? 

Honor the People 
How do you prioritize consent in online space? Does engaging with your work require 
the participant to sign a terms of service? Do you control that terms of service, or is it in 
the control of a company or organization? 

How do you protect your community? If you are making work that uses or stores in- 
formation about the data, interactions, or bodies of others, how do you keep that safe? 

Pay attention to when you use language like “mining” data. How can you maintain 
an explorative, rather than exploitative, relationship with the data collection process? 

Does the code you're writing/using support structures of violence? Do the tool- 
kits you use align with the values of consent and dignity? 

What is the offboarding process for someone who would like to stop interacting 
with your work? What can they take with them? What do you do with the things they 
have left behind (data, feedback, etc.)? Can people take breaks with the option of return- 
ing without penalty? 

Does your project use design patterns that mirror cycles of addiction (e.g. copying 
the slot machine)? How can it promote healthy, balanced relationships with technology? 

Honor the Exchange 
How can your work prioritize community and relation? 
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Dissolve hierarchy in your teaching/learning by respecting wisdom in all its forms. New 
participants always have another expertise. 

Is the code you're writing intentionally or unintentionally so hard to read or obscure 
that others cannot learn from or contribute to it? Why? 
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PER 5 Access, Keep it Coming! 2020, 
010 Claire Kearney-Volpe. 
UL Sea ews OSSa Tee ee In 1996, the World Wide Web Consortium 
--- (W3C) formed the Web Accessibility 
‘© |nitiative. This initiative is responsible for 
~. creating what many people know as 
i the Web Content Accessibility Guidelines 
©" (WCAG)—pronounced “wuh-cag,” or 
: “w-cag.” WCAG is a series of design and 
>.< development recommendations for 
~. making the web more accessible to peo- 
~=... plewith disabilities. These guidelines 
“<< are intended to support the creation of ac- 
Telalsie se enaviaeh MTs 4 ” cessible content for persons with a var- 
FIG Content Aware Collage, Alice MiraChung. —_jetyof disabilities, including deafness, hear- 


010-01 Variations of a2D cube with missing lines : F atta 94 
showlngits opannassaliplacedunagild ing loss, learning disabilities, cognitive 


covering the entire white canvas. This illustration is limitations, limited movement, speech dis- 
computer generated from the diagram “Variations of abilities, blindness, and low vision 
Incomplete Open Cubes” by Sol LeWitt. (WCAG, 2019). 


WCAG’s cousin ATAG (Authoring Tool Accessibility Guidelines) are lesser known, 

but are intended to support accessible creation tools. Just as important as consuming 
content, authoring tool accessibility helps put means of production in the control 

of many, and democratize the creation of new media and technologies. 

One super cool thing that digital accessibility principles give everyoneis a 
framework to effectively communicate information across multiple modalities. It’s also 
an opportunity to experiment with input and output types. 

P5 Access Work 
Over the last few years, p5.js has made great strides toward becoming a more acces- 
sibility-aware open-source community. A community that not only promotes and incor- 
porates best practices, but pushes the bounds of communication and creativity. 

The p5.js community took one of its first steps toward digital accessibility when 
Taeyoon Choi facilitated Signing Coders (http://taeyoonchoi.com/soft-care/signing- 
coders/), a “series of workshops on creative expression with computer programming, art, 
and poetry which focuses on reaching out to youth who are deaf or hard of hearing” 
(Choi, 2017). This initiative was p5’s first and only educational initiative for accessibility 
designed from the beginning as an inclusive learning experience, with real-time tran- 
scription and ASL interpretation. 
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Shortly after this, Atul Varma (https://github.com/toolness) and | began teaching work- 
shops on web development (https://medium.com/processing-foundation/p5-acc 
essibility-115d84535fa8) who incorporated prototypes of tools to make learning and us- 
ing p5 more accessible to people who are blind and use screen-reader technology. 
This work led to the creation of an accessible web development curriculum, and a bet- 
ter understanding of ways to support the accessibility of p5’s visual outputs. 
The Processing Foundation, true to its commitment to making coding a more ac- 
cessible and inclusive practice, was generous to support the fellowship work of 
Mathura Govindarajan and Luis Morales-Navarro (https://medium.com/processing- 
foundation/working-on-the-p5-accessibility-project-58a781575400). With the 
help of a team of dedicated contributors, including Josh Mielle (https://twitter.com/ber 
keleyblink?lang=en), Lauren McCarthy, Cassie Tarajakan, Antonio Guimaraes, Eliza- 
beth G. Betts, Mithru Vigneshwara, and Yossi Spira, Govindarajan and Morales-Navarro 
endeavored to implement a system for making the visual outputs of p5 more access- 
ible to people who are blind. This work led to the development of a p5.js accessibility li- 
brary and work to make the p5 web editor more accessible. 
To Do 
The road to amore accessible p5.js is a long one, and will take the efforts of our whole 
community—not just those who develop p5.js as a library, but those who teach it, doc- 
ument it, and develop project work. During the p5.js Contributor's Conference in the fall 
of 2019, the p5 community welcomed Sina Bahram to contribute and advise on the 
future of p5 Access work. This yielded the following working areas: 
Educational work to promote awareness and skills 
We need to tighten up our documentation of p5’s accessibility features 
and library. 
We need to develop tutorials and trainings around web content accessi- 
bility for distribution amongst contributors and educators who use 
p95 in workshop/classroom settings. 

Tactical Work to enhance the accessibility of the p5.js library and documentation 
We need to make it clear in our documentation work what has 
been done, how to contribute (best practices doc), and what work is in 
the queue. 

Research to explore the dynamic generation of multimodal description of 

primitives and composites of primitives in a static scene to facilitate access for 

persons with disabilities. 
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PER What Does it Mean to Be a Contributor?, 2020, 
011 Luis Morales-Navarro. 
A = : Ds, RW eZ 


"Me 


™ Four days into the p5.js Contributors’ Con- 
} ference 2019 (https://pdjs.org/comm 
unity/contributors-conference-2019.html) 
)) | realized that | was not sure of what it 
dR ; = Meant to bea contributor. After the confer- 
FIG caiaaian Sale e renerraerens _ eeeramaced and niigues pute a 
011-01 Gciinliioroaiertedeek background with Mere hie in which people participate My 
white curves creating a botanical three- this project, | started asking questions, 
dimensional graphic quality from complex patternsby having conversations about the contributor 
the Paencibacillus vortex bacteria colony. identity with members of the p5.js com- 
munity, and thinking through how the contributor identity fits into wider conversations 
about participation within FLOSS. As Johanna reflects (https://medium.com/pro 
cessing-foundation/belonging-in-the-mess-3d3ad05 7 7499) in p5 and Processing, 
open-source is less about writing software and more about how software is written. 
The p5.js contributor identity is constructed in response to the status quo of software 
development communities. Contributors are people who deeply care about making 
open-source software more inclusive. 

For some pd.js contributors like Aaron the emphasis on community is what mo- 
tivates them to work on the project. “I decided to contribute when | realized that commu- 
nity and ethics were more important than the product itself,” they tell me in early Octo- 
ber. Similarly, evelyn explains that “contributors care more about the people that use the 
software and that work on it than the software itself.” evelyn’s view resonates with 
plenty of the conversations I’ve had with contributors. This perspective is different from 
many ways in which FLOSS is theorized. Usually the social organizations of FLOSS are 
seen as amedium for writing efficient code; with emphasis on the “bazaar.” The writing 
of code is the focus, not the people who make the bazaar possible. Lehmann argues 
for this common software-centered view saying that “to (nearly all) FLOSS developers, 
writing software is the focal point [...] the structure of projects is shaped by this, not 
the achievement of some social change.” However, when | talk to contributors, most em- 
phasize how they care about community, inclusion, and changing the social nature 
of FLOSS. “We don’t want to make the software with the most impressive graphics, it’s 
about people, it’s about beginners, that nobody feels left out,” a contributor tells me. 

The p5,js contributor identity is different from most FLOSS developer identities 
because the p5 project itself was born with a clear goal of transforming how and who 
gets to write software. Lauren succinctly describes this: “I originally got involved with this 
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work because | was frustrated by the lack of diversity in the open source world. | felt 
alone as a woman of color and wished for a space that was more welcoming to queer, 
trans, women, and people of color. p5.js became a way for me and many others who 
felt underrepresented, excluded, or intimidated to create an alternative together.” Con- 
trioutors share a commitment towards inclusion and making participants feel wel- 
come. Cassie is “really impressed by how willing people are to be friendly. Because that 
is quite uncommon in the open source world. A community being friendly is so radi- 
cal. And that’s weird... why is that so radical?” “I feel welcomed and accepted here, which 
is something | don’t feel in a lot of places,” Qianqian says. Xin agrees: “I always feel 
listened to and respected. It’s shockingly a rare experience.” In the process of creating 
a project that prioritizes people and inclusion, contributors engage with critical ques- 
tions about the nature of software and even what it means to be a contributor. 

Contributors recognize that writing code is not the only way to become a con- 
tributor; theythinkteaching, organizing community events, andcreatingtutorials anddoc- 
umentation are valuable ways of contributing and building community. One contribu- 
tor that | talked to even suggested that perhaps final users should also be considered 
contributors because without them there would be no reason for developing or teach- 
ing pd.js. However, contributors are aware that currently the community gives more im- 
portance to software development over other ways of contributing. Xin and Cassie 
wonder how contributions that are not code—teaching, community organizing, making 
projects—can be shared, encouraged, and celebrated in the online community. 

In thinking about the contributor identity, and who gets to be a contributor, contri- 
butors recognize that there’s alot work to be done to make the project more inclusive. 
For some it’s urgent to increase access for beginners and people with disabilities. evelyn 
says that talking about inclusion and saying that everyone is welcome is not enough, 
she asks: “How can we prioritize people who have been marginalized over people who are 
welcome to any project?” There are some concerns about how the ideas behind the 
software are presented to final users, a contributor wonders how resources for learning 
how to code can incorporate questions about the role coding and software play in so- 
ciety. Other contributors recognize that the idea of a contributor carries values that might 
not easily translate to places with more conservative and authoritarian governments. 

These are some of the things I’ve learned while working on an ongoing larger pro- 
ject about the contributor identity. Like many contributors, at first, | was hesitant to 
identify as acontributor, and! am still not fully comfortable with that label. But | am grate- 
ful to be part of this community and for the conversations the community is willing to 
have about what it means to be a contributor, what it means to teach or make software, 
how software should be built, and who gets to participate. 
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PER Getting Picked Last, 2020, 
012 Dorothy R. Santos. 

BOE : All of the big ideas | come up with are al- 
ways better in my head, such as learn- 
ing code. Not that | ever thought learning 
would be easy, but! expected to pick it 
up rather quickly. The past few years have 
been humbling when it comes to learn- 
ing code. Sometimes, I'm embarrassed to 
say that I’m not an expert coder espe- 
cially as someone involved in the open- 
source software for the arts commu- 
nity. | would like to see myself as someone 
who advocates and uplifts the work 
being done through creative code. While it 
has only been a handful of people who 


FIG Content Aware Collage, Alice Mira Chung. 


012-01 Grayscale photograph showing a grid of Sa ; 
computers with a washed-out human form have said, “You do so much work with Pro- 


handling the cables, one in each row (four rows total). | Cessing Foundation, | figured you just 


Based on U.S. Army photo research archives. know how to code really well,” it becomes 
disheartening. | wonder if | belong. | often ask myself, “Who do you think you are?” 

The memory that hurts me when | think about it was the time | took an Introduc- 
tion to Programming for Artists hybrid seminar (my second year as a PhD student) 
and feeling awful within the first week. | didn’t have the same skills as my classmates. | 
also wondered why on earth people who are so well-versed in programming enrolled 
in the class, but I let this thinking go. | couldn’t let anyone’s knowledge and experiences 
diminish me. | was there to learn. | was excited. | did the homework and worked 
hard to understand. Yet if | Knew that the majority of work entailed watching nothing but 
online tutorials with little discussion and guidance on coding languages and art, 
| would not have enrolled! 

The last few weeks of the class seemed to sneak up on me and | was paired 
with someone who knew how to code well (also | wasn’t picked or asked by other groups 
or people to join their team; likewise, | was too scared to ask to join others). The in- 
structor met with us and said to me, “You two will have to figure out how you will work to- 
gether because | don’t want **** to end up having to do all of the coding.” My heart 
sank. | sat on this comment. **** didn’t say anything. As a matter of fact, | was disappoin- 
ted in her for running off and doing her own project without communicating with me 
at all! | cried from the disappointment. This story might sound silly to someone reading 
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this who has always been encouraged in the hard sciences or someone who is a mas- 
terful coder. And yes, | get that | have skills others don’t have. | write, facilitate, en- 
courage, create weird stories, and | can even read through theory and have some rela- 
tively interesting conversations with my classmates. | also read tarot cards for people 
and | seem to have a knack for being a cheerleader for community members. But | yearned 
to gain some kind of technical skills. | still do. 

Eventhough |’m a lot older and a complete novice, I’m ecstatic when | practice 
and code works. I’m thrilled and | don’t care if hundreds before me figured out how 
to create a text generator in p5.js. | FIGURED it out by myself. | guess what I’m trying to 
say is that the open-source community, especially the p5.js community, has been 
the most supportive and caring when it comes to my goals and aspirations of making 
art and creating new ways to present my writing. 

| ended up doing a project for the class (and passed!) because | watched Dan's 
tutorial on using p5.js with the riTa library (https://www.youtube.com/watch?v=llPE 
vh8HbGQ) created by Daniel Howe (https://rednoise.org/rita/) and was inspired by some 
of the projects | researched in computational literature. | think one of the biggest 
takeaways was speaking with my professor and telling her | didn’t appreciate her lack of 
confidence in my abilities. While she was apologetic, | started to wonder and imag- 
ine what other students like me might be going through. Perhaps this is why Dan, Lauren, 
Casey, Ben, Saber, Johanna, and | care so much about the community and believe 
in accessibility and inclusion. There’s so much work to do because | had to go outside 
the structures of my institution to get the knowledge and skills to do the work | should 
have been learning from within it. | should have felt supported, but | had to look elsewhere. 
Thankfully, | didn’t have to look too far and everything | needed was within reach. This 
workis not easy and ittakes so much intellectual, emotional, and physical labor to be pre- 
sent. My hope is to continue advocating and uplifting all of the work done within and 
for the p5.js community because it’s been so welcoming and open to me from the start. 
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PER Imagining a We, 2019, 
013 = Xin Xin. 


sem Organizing Processing Community Day, Los 
s Angeles was an incredible experience. 
As acommunity organizer and an educator, 
_ often need to imagine a we during a plan- 
ning process. This leads to a series of ques- 
tions | ask myself: Will the participants 
©) find the program interesting and beneficial? 
Will my students see the things | see and 
: feelthethings|feel? Am lincludingchalleng- 
FIG PCD@LA2019! ing but important subject matter? Am | 
013-01 Agroup photo of approximately 140 people + proposing aworldthatisintentional and em- 
stand outside ona lawn. powering? 
Starting from the first day of organizing PCD@LA, imagining a we led me to ask this ques- 
tion: Are we interested | in co-creating a time and space where artists, designers, 
iy coders, activists, children, and teenagers 
don’t need to pretend that our realities 
_ are mutually exclusive? And, can we engage 
with one another person to person, 
rather than professional to professional? 
These initial questions became a 
guiding principle during the concept phase, 
open calls, visual promotions, to design- 
ing and implementing the program. After 
working with the organizing team through 
. an eight-month planning process, we were 
FIG A.\M.Darke, track coordinator, introduces the ablé to gradually implement these un- 
013-02 Radical Pedagogy track. derlying questions in various aspects of the 
eo 
rightis a projection ona ate wall, with blue background tal of 6 conference guests presenting ut 
and white text that reads: “Radical Pedagogy, A.M. four differently themed tracks, with self- 
Darke — Dorothy Santos.” On theleftis asmallerscreen Organized sessions, live-captioning, child- 
with CART captioning, in white text on a black back- care, and individual communication 
d. The text reads: “ : 
fie emotional ce pe Ayan aNeie channels dedicated to POC and auch folks. 
circles and within open-source communities who are The size of the program was am- 
just saying, this is what | learned.” bitious but highly intentional. Without this 
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we wouldn't have been able to bring a multi- 
tude of people into the same room and 
include a wide array of important topics re- 
lating to art, technology, and activism. 

For this |am extremely proud and grateful 
for all the lightning talk speakers and 
session organizers whose contributions 
truly gave the day its substance. 

Making an expansive and inclusive 
program with a small team means that 
there were many moving parts to oversee 
throughout the day. Of course this cre- 
ated a healthy dose of anxiety prior to the 
event. For months | played out many 
different scenarios of how each part of the 
day could happen. Many reflections 
and doubts were related to whether | was 
making the right decisions and fram- 

; ing the event in a way that would produce 
a Ee ™ <= 9 empowering outcomes. But as we 
FIG Participants of the workshop “My Face is started to count down to the event, these 
013-03 My Own!:Helping Kids Beat FacialRecogni- anxieties became unproductive, and 

_____ tion Software with README," from the | realized that after all the organizing effort, 
EH Baath itwas left to the PCD@LA community- 

ree people are pictured. In the foreground, ‘ ; ; 

achild paints blue lines on the forehead ofan adult. Which wouldn't be fully formed until the day 
In the background, an adult wearing amask thatresem- of the event—to create the Processing 
bles flower petals takes a selfie. Community Day they’d like to have. 
In order to create something new we also have to not be afraid to fail. Failures are so 
scrutinized in the society we live in, though they are often accepted as part of everyday 
life in certain non-Western cultures. There are a couple things that took place dur- 
ing the organizing process and the event that | would do differently in the future. For in- 
stance, designing a different presentation duration; providing higher compensation 
toart collectives; and reserving budget to hire an additional person to commit to commu- 
nity outreach, specifically to youth and kids’ programs, and the disability communi- 
ty. Prior to posting the open call, | would have loved to have gotten more feedback from 
these communities on what they would like to see from the programs. 
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FIG From “Toward a Reflexive Data Culture,” a work- 


013-04 shop with Roopa Vasudevan, part of the track, 

Under the Silicon, the Beach! 

Two people stand in a classroom. One watch- 
es the other put Post-Its on a whiteboard. The white- 
board has been divided into three columns, which read: 
“Maintains Status Quo, Breaks Status Quo, and Uto- 
pia/Way Fwd.” Behind them is a projection on a wall of a 
slide with text that is partially covered by the white- 


board. Some text that can be seen reads, “1. one way da- 


ta art breaks the status...manifestation, 2. one way 
data art contributes to the... 3. one... utopian vision...” 


PERSPECTIVES 


| feel very lucky that the event was extreme- 
ly well received by the many people | 

came across during the day. | have never 
heard anyone describe a conference 

with the word “magical,” but this word was 
brought up to describe PCD@LA by a 
couple people | spoke to. This was such a 
pleasant surprise, and not something 

| could have anticipated prior to the event. 
It can only happen at the moment and 

for the moment, through the co-creation of 
conference guests, participants, organ- 
izers, and volunteers. 
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PER  p5.js Editor, A Personal History, 2021, 

014 Cassie Tarakajian. 

| began work on the p5.js Editor over five years ago. | was given the opportunity when 
Dan Shiffman and Lauren Lee McCarthy approached me with some funding from 

the Interactive Telecommunications Program (ITP) at NYU to start the project. Despite 
applying for but not receiving a Processing Foundation fellowship, | was zealous 

about being involved with the organization. | worked in tech as a software developer for 
afew years, but this was the first software project led. It was also the first open-source 
project | contributed to. | was excited to work with folks | admired, who seemed to trust | 
would do a good job, though | didn’t really understand why. | had a simple version of 

the Editor working within a few months of starting, which made teaching p5.js easier. As 
the project matured, | started teaching, mentoring, designing, doing user research, 
and project management. By the fall of 2018, | publicly announced the project, when | 
felt like it was stable enough. A year later, one million p5.js sketches had been cre- 

ated using the Editor. Now, five years after starting this project, growth has accelerated, 
with over five million sketches created, and there are no signs of the project and the 
work slowing down. 

For the Editor to have grown exponentially in the past few years, | wanted to 
take this moment to recordits history. As | sat down to create a timeline of events, | quick- 
kly realized the shortcomings of this process. At the time of writing this, 805,891 peo- 
ple have created accounts on the editor. That means there are at least 805,891 separate 
histories of the p5.js Editor. However, | have only experienced one of them. Rather 
than seeking to document a comprehensive history of the p5.js Editor, instead, | want to 
share my experience. 

This project is much bigger than just me. According to GitHub, 121 different peo- 
ple have contributed code (https://github.com/processing/p5.js-web-editor/graphs/ 
contributors) from around the world. This number doesn’t begin to capture those who have 
created issues, taught a workshop with the Editor, written their first line of p5.js code, 
or even forked their own version. It also doesn’t capture the people who have supported 
me when I’ve felt down about the project or those who have helped me celebrate mile- 
stones. As a community, we have accomplished this together. While this is my story, my 
story has been impacted by all of you. 

ATimeline of the p5.js Editor 
2014 SUM SamLavigne starts the p5.js Desktop Editor as a Google Summer of 

Code (GSoC) project. 
2015 SUM SamLavigne mentors Guy de Bree by porting p5.js Desktop Editor to 
Windows as another GSoC project. 
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2016 MAY 
JUN 
SUM 
AUG 
FALL 
FALL 


2017 JAN 
SPR 


SPR 


SUM 


SUM 


SUM 
OCT 


2018 MAR 
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Jason Sigal creates a Web IDE for p5.js, mentored by Dan Shiffman, as 

a GSoC project. 

Cassie Tarakajian begins working on the pd.js Web Editor, with support 
from NYUITP. 

The first workshop using the p5.js Web Editor is taught by Cassie Taraka- 
jian at ITP Camp. 

Mathura Govindarajan works on web accessibility features in the p5.js 
Web Editor, mentored by Claire Kearny-Volpe. 

The second workshop using the p5.js Web Editor is co-taught by Cassie 
Tarakajian and Emily Xie at Pioneer Works. 

The p5.js Web Editor is tested at NYU ITP, UCLA DMA, and other univer- 
sity programs. 

Yining Shi adds new features to the p5.js Web Editor: detecting and prev- 
enting crashes from loops and importing the p5.js examples. 

The p5.js Desktop Editor is deprecated in favor of the p5.js Web Editor. 
Cassie Tarakajian is a Processing Foundation fellow, continuing 

work on the p5.js Web Editor. See their post, A p5.js Web Editor for All 
(https://medium.com/processing-foundation/a-p5-js-web-editor- 
for-all-64aaa3f9d767). 

Andrew Nicolaou is a Processing Foundation fellow, working on new 
features for the p5.js Web Editor. See their post, Features and Fixes in the 
p5.js Editor (https://medium.com/processing-foundation/features- 
and-fixes-in-the-p5-js-editor-722e4b56495e). 

Jen Kagan works on code autocomplete features and Zach Rispoli 
works on classroom features, as GSoC projects mentored by Cassie 
Tarakajian. 

NYC Department of Education begins using the p5.js Web Editor as 

part of CS for All curriculum, with support by Luisa Pereira, Jose Olivares, 
and Aankit Patel. 

Jerel Johnson creates new UI designs. 

Processing Community Day takes place at the MIT Media Lab. Cassie 
Tarakajian makes their first presentation about the p5.js Web Editor to the 
Processing community. 

NYC Department of Education partners with Processing Foundation to 
support development by Cassie Tarakajian, with support from Ana 
Giraldo-Wingler. 

Mathura Govindarajan and Luis Morales-Navarro move accessibility 
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features in p5.js Web Editor to separate library, p5.accessibility.js, as a 
Fellowship project. 


SUM Liang Tang makes updates the console, as a GSoC project mentored by 
Cassie Tarakajian. 

SEPT The official public release of the p5.js Web Editor. The URL changes from 
alpha.editor.p5js.org to editor.p5js.org. See the post Hello p5.js Web 
Editor! (https://medium.com/processing-foundation/hello-p5-js-web- 
editor-b90b902b74cf) 

SEPT Dan Shiffman begins using the p5.js Web Editor on his YouTube channel, 
Coding Train. 

FALL Cassie Tarakajian teaches their first full semester class, Introduction to 
Computational Media, using the p5.js Web Editor. 

OCT Generative Design releases a second edition, with examples written in 
p5.js, and ported to the p5.js Web Editor by Joey Lee. This is the first 
published reference of the p5.js Web Editor. 

NOV Jerel Johnson makes updates to the colors and creates a design system. 

2019 SUM AsaGSoC project, Rachel Lim adds the ability to search sketches, 
mentored by Cassie Tarakajian. 

SUM _ Andrew Nicolaou adds the ability to create collections, the Dashboard 
view, and a public API. 

AUG Atthep5.js Contributors Conference, Cassie Tarakajian and Luca 
Damasco draft a new description of the p5.js Web Editor, and begin ref- 
erring to the project as the p5.js Editor. 

FALL Cassie Tarakajian teaches Introduction to Computational Media for asec- 
ond time, at NYU ITP. 

DEC Thep5.js Editor surpasses one million sketches created. 

2020 SPR Khensu-Ra Love El implements privacy settings for sketches. 

MAY  p5.js Editor starts using versioning, with the v1.0.0 release. 

SPR Witha grant from the Clinic for Open Source Arts (COSA), Cassie makes 
web accessibility updates to the p5.js Editor, such as adding ARIA 
labels and adjusting color contrasts. See their post, Accessibility Impro- 
vements for the p5.js Web Editor (https://medium.com/processing- 
foundation/accessibility-improvements-for-the-p5-js-web-editor-3d76 
b/c68c6d). 

AUG Cassie Tarakajian becomes p5.js Editor Lead at Processing Foundation. 

SUM _ Ghales Trilo adds mobile design, mentored by Cassie Tarakajian, and 
Omar Verduga adds Spanish translation, mentored by Andrew Nicolaou. 
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OCT Thep5.js Editor surpasses three million sketches created. 

NOV Processing Foundation receives a grant from Grant for the Web to 
develop a subscription model for the p5.js Editor. 

2021 SPR _ Connie Ye adds new tests and a testing guide, mentored by Cassie 
Tarakajian with support from the STUDIO for Creative Inquiry. 

SPR New Media Rights drafts a Terms of Use and Privacy Policy. 

SEPT Thep5.js Editor surpasses five million sketches created. 

SEPT What's Newwith p5.js and the p5.js Editor (https://medium.com/pro 
cessing-foundation/whats-new-with-p5-js-and-the-p5-js-editor-2045 
{5ca/74e) is published, sharing new p5.js Editor features: many new 
translations, an interactive console, and debugging improvements. 
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PER Notes on Activism, 2020, 
015 Johanna Hedva. 


It’s exhausting. It’s frustrating. It burns you 
out. Any activist can tell you this but, 
mm for various reasons, it’s not much talked 
@ about. Indeed, it’s minimized, ignored, 
fy and even repressed. At the monthly meet- 
= up with your collective, you're not sup- 
He posed to spend your time talking about how, 
4 Say, the organizers got in an argument 
a cae an peak ~ because one of them said something pro- 
FIG Content Aware Collage, Alice Mira Chung. blematic. or how the website broke so 
015-01 Anassembly of white zeros, ones and dashes : 
positioned ina grid covering the entire gray 0 one could donate, or how only four peo- 
canvas. This is a computer-generated illustrationbased ple came to the last workshop, or—the 
on zeros and ones from MNIST database. list goes on. One ought not, seems to be the 
official rule, give too much space to this—the messy reality of activism—because it 
sits uncomfortably with one’s aims. When you're trying to make the world not only a bet- 
ter place, but an entirely new one, being depleted, discouraged, and dismayed seems 
wrong. Where does fatigue fit into insurrection? It’s so incongruous to your ideals be- 
cause it reminds you how the world actuallyis, not how you would like it to be. And 
this is a difficult truth to bear because it emphasizes how much more work there is to do. 
I've worked in activism for most of my adult life, and I’ve been getting paid to do 
it since 2014 by the Processing Foundation. But | don’t call myself an activist. Most acti- 
vists | know don’t call themselves such. And we all tend to give the same reasons why: 
we say that there are so many others who are doing “real” activism, that our pitiful atte- 
mpts don’t warrant the weight of the title. I bet this is not the actual reason. | think what 
we really mean is that activism is too arduous, too full of failure and defeat, for it to be gi- 
ven the vaunted status of aname that shares its root with the word “action.” So much 
of activism feels like the opposite of action: it’s a lot of little labors that are invisible but 
necessary; it’s so many delays, so much waiting; it’s things not working out the way 
you'd hoped; and it’s coming to terms with why your attempts failed, and may always fail. 
It’s persisting in the face of this—that you may a/ways fail—and still choosing to try again. 
The word “success” has been around for millennia, and its meaning has changed 
throughout history. In its earliest inception, it was the combination of two Latin roots, 
“sub” and “cedere,” which meant “next to, after,” and “go, move,” respectively. Success, 
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asin “to succeed,” originally meant what came after, what followed, and it was a neutral 
fact, neither good nor bad. It had nothing to do with triumph or achievement, and 

didn’t come to mean what it does now—the accomplishment of a desired result—until 
the 1580s. It’s not a coincidence that that development occurred then. Capitalism 
began to take root in Europe in the 16th century, so it makes sense that how we//a thing 
performed would come to measure the thing’s value. 

This capitalist tenet is one that we'd do well to leave behind, because it’s not actu- 
ally how the world works. Although it structures our reality, it’s not very realistic in 
practice. Most things don’t perform well: they break, don’t work, take longer, are expen- 
sive, and need more support than you thought. And when | say “things” | mean mach- 
ines and objects, but also bodies, relationships, ideologies. 

When it comes to “success,” I’ve come to learn that the more exhausted you are, 
the more successful your activism has been. This is because, at its heart, activism 
is about trying to do something that’s never been done before—and the most important 
part of that sentence is the word “trying.” Exhaustion is the sign that you tried, that 
you gave it all you had. It’s not a done deal, it’s only ever an attempt. 

It’s not just that there are no role models or guides. It’s not just that the world 
and its institutions are structured in opposition to what your activism is trying to do. It’s 
that, because activism is about radically re-doing how we do things, and have done 
them for generations, it will necessarily fail far more than otherwise, because no one has 
ever donethis before. And not only is it new, but it agitates against a world that does 
not want to change. It’s trying to do something that those in power don’t want to do. Of 
course it’s gonna fail. 

Maybe it’s a platitude to say that, but it gives me comfort. I’m reminded that activ- 
ism shares its root with another word—actual. As much as activism is about dream- 
ing into being something that doesn’t exist yet, it’s also about standing face-to-face with 
the actual mess of life. In that mess, there is exhaustion and failure, sure, because 
that’s what life is made of. 

Failure has become a thing that successful people in successful fields like 
to talk about. In those fields, which champion success as capitalism defines it, failure is 
positioned as valuable because it teaches you something, which pushes you to be 
“better.” | like the idea of failure being neutral, neither good nor bad, just a fact of life, what 
comes after what is done. | like thinking that activism will alwaysfail. Because it means 
that the decision to take action, even in the face of certain defeat, is pure. It’s not going 
to get you paid, or bring you victory. It’s trying to do something that has never been 
done before, in the face of an indifferent and hostile world that doesn’t value this kind of 
action. It’s important because it is important. It is persisting. And that is enough. 
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083 


The Processing Foundation Fellowships support artists, cod- 
ers, and collectives in visionary projects that conceive 

a new direction for what Processing as a software and acom- 
munity can do. Fellowships are an integral part of the 
Processing Foundation’s work toward developing tools of 
empowerment and access at the convergence of art 

and technology. Fellowships emphasize projects that expand 
Processing and its affiliated projects, as well as the evo- 
lution of a Fellow’s practice. Work done by Fellows is support- 
ed through funding and mentorship from The Processing 
Foundation. 


Public, Private, Secret-Johanna Hedva with Charlotte Cotton, 
2016, Johanna Hedva and Charlotte Cotton. 

Processing Sound Library, 2013, Wilm Thoben. 

p5.js, 2013, Lauren Lee McCarthy. 

OpenCV for Processing, 2013, Greg Borenstein. 

Learning p5.js, 2013, Tega Brain and Luisa Pereira. 

Friendly Errors, 2013, Jess Klein and Atul Varma. 

The Processing Accessibility Project, 2013, 

Claire Kearney-Volpe. 

Coding Comic, 2013, Digital Citizens Lab (Evan Wu, Sharon Lee 
De La Cruz, and Leslie Martinez). 

Processing.py, 2017, Allison Parrish. 

jManos ala obra! Empecemos. (Creative Coding in p5.js), 2017, 
DIY Girls (Sylvia Aguifiaga and Vanessa Landes), Mentored by 
Lauren McCarthy and Jesse Cahn-Thompson. 

Processing on ARM, 2017, Gottfried Haider, Mentored by Ben Fry. 
Everyone Can Code: A Creative Coding Curriculum for Students 
with Low Computer Literacy, 2017, Niklas Peters, Mentored 

by Daniel Shiffman. 

Community and Code, 2017, Saskia Freeke, Mentored by Phoe- 
nix Perry and Johanna Hedva. 

Creative Coding with p5.js for Prisons in Washington State, 2017, 
Susan Evans, Mentored by Rhazes Spell. 

Ap5.js Web Editor for All, 2017, Cassie Tarakajian, Mentored by 
Daniel Shiffman and Lauren McCarthy. 

Features and Fixes in the p5.js Editor, 2017, Andrew Nicolaou. 
Apo.js Dissection Manual, 2018, Vijith Assar, Mentored by 
Lauren McCarthy. 

SuaCode: Breaking the Coding Barrier in Africa with Smart- 
phones, 2018, George Boateng, Mentored by Niklas Peters. 
Working on the p5.accessibility Project, 2018, Mathura 
Govindarajan and Luis Morales-Navarro, Mentored by Claire 
Kearney-Volpe. 

Building Inclusive Learning Spaces for Students and Teachers, 
2018, Saber Khan, Mentored by Daniel Shiffman. 

p5.js WPF — ARE SHS BF WES, 2018, Kenneth 
Lim, Mentored by Xin-Xin. 

Justice Factory: Data Visualizations For Empathy, 2018, 

Ari Melenciano, Mentored by Daniel Shiffman. 
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Teaching Processing in AP Computer Science Courses, 2018, 
Kaitlyn M. O'Bryan, Kate Lockwood, and Thomas J. Reinartz, Jr., 
Mentored by Casey Reas. 

Renovating the Processing.org Website, 2018, Kirit Tanna, 
Mentored by Scott Murray. 

Making Processing Available in NYC Schools, 2018, Courtney 
Morgan and Jose Orea, Mentored by Saber Khan. 

p5.js 1.0, 2019, Stalgia Grigg and Evelyn Masso, Mentored by 
Lauren McCarthy. 

Expanding SuaCode to Teach African Students to Code on 
Smartphones, 2019, Prince Steven Annor, Mentored by 
George Boateng. 

Making Processing Tools Accessible to the Indian Community, 
2019, Manaswini Das, Nancy Chauhan, and Shaharyar Shamshi, 
Mentored by Mathura Govindarajan. 

An Immediate Graphic User Interface Library for Processing, 
2019, Doeke Wartena, Mentored by Casey Reas. 

Pride Peers Programming Prosperous Protection, aka P5, 
2019, Matilda Wysocki, Mentored by Daniel Shiffman. 

Expand and Diversify p5.js in China, 2019, Qianqian Ye, 
Mentored by Dorothy Santos. 

Coding with Sound and Art for Middle-School Students, 2019, 
Layla Quinones, Mentored by Saber Khan. 

Teaching Digital Dance: Coding, Graphic Design, Animation, 
Dance, and Robotics, 2019, Emily Fields, Mentored by 

Saber Khan. 

Make-IT V2: Enabling universal access to technology, 2020, 
Abdellah lraamane, Mentored by George Boateng. 

Know Your Rights, 2020, Kalila Shapiro, Mentored by Luis 
Morales-Navarro and Claire Kearney-Volpe. 

Cozy Coding, 2020, Aren Davey, Mentored by Daniel Shiffman. 
Open Computer Vision for p5.js and Processing, 2020, 
George Profenza, Mentored by Golan Levin. 

Creative Coding & Computational Thinking for Young Students, 
2020, Michael O’Connell, Mentored by Layla Quinones. 

p5 for 50+ (p5 for 50 and Beyond), 2020, Inhwa Yeom and 
Seonghyeon Kim, Mentored by Qianqian Ye. 

Critical Machine Learning with mld.js, 2020, Achim Koh, 
Mentored by Joey Lee. 
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DIY Al: ml5 Community Starter Kit, 2020, Emily Martinez, 
Mentored by Lydia Jessup. 

Fine-tuning ml5.js: Friendlier Code & Development Processes, 
2020, Bomani Oseni McClendon, Mentored by Joey Lee. 

ml5.js Examples, 2020, Andreas Refsgaard, Mentored by 
Yining Shi. 

Coding with Friends, 2021, Ambika (Computational Mama), 
Mentored by Shaharyar Shamshi. 

Developh p5.js Camp, 2021, Chia Amisola, Mentored by 
Dorothy Santos. 

PORTAL.WEB — A Cyber Witch Coven, 2021, Cy X, Mentored by 
Johanna Hedva. 

Pé Cinco: Internationalization and Popularization for Portuguese 
Speakers, 2021, Felipe Santos Gomes, Julia Brasil, Katherine 
Finn Zander, and Marcela Mancino, Mentored by Claudio 
Esperanca. 

Indigemoji, 2021, Akeltye-antheme awetyeke, Mentored by 
Yining Shi. 

Internationalization Support: Spanish Localization for the 
Processing website, 2021, Omar Verduga, Mentored by 
Esteban Sandoval. 

Digital Accessibility Syllabus, 2021, Adekemi Sijuwade-Ukadike, 
Mentored by Claire Kearney-Volpe. 

Starter Kit for Teaching Creative Coding with p5.js, 2021, Angi 
Chau, Mentored by Saber Khan. 

Cultivating Creative Connection with Scratch and p5.js, 2021, 
Shawn Patrick Higgins, Mentored by Saber Khan. 

P5LIVE — Walkthrough, 2021, Ted Davis, Mentored by Saber 
Khan. 
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FEL Public, Private, Secret-Johanna Hedva with Charlotte Cotton, 2016, 
001 Johanna Hedva and Charlotte Cotton. 
Pf), Johanna Hedva and Charlotte Cotton dis- 
‘7, cuss events curated in conjunction with 
Public, Private, Secret—on view at the ICP 
Museum (250 Bowery) from June 23, 
2016 to January 8, 2017. 
Jonanna Hedva, Director of In- 
itiatives at Processing Foundation. 
Charlotte Cotton, Curator-in-Res- 
idence at Processing Foundation. 
CC Johanna, itis areal pleasure to 


FIG 2019 p5.js Contributors Conference at Frank 


001-01 Ratchye STUDIO for Creative Inquiry at CMU. have collaborated with you on a ser- 
Twenty people sit in small groups working ies of events with the Processing 
together in a large meeting room. Foundation Fellows. I'd like to start 


by asking you to describe the recently formed Processing Foundation, where 
you are Director of Initiatives, and its formation and aims. 

JH — Thankyou, Charlotte! The Processing Foundation was founded in 2012, more 
than ten years after the original Processing software was invented. The Foundation 
is the nonprofit organization that manages the development of Processing, 
and now p5.js and Processing.py. These three software projects are open source 
(free, non-proprietary, and community-made) and created by artists, for art- 
ists. The Foundation’s aim is to nurture the communities that make and use them. 
We have a Fellowship Program, which funds creative and technical research 
by artists, coders, and collectives; an Education Program, which develops cur- 
riculum and resources for educators in art and computer science depart- 
ments; and an Initiatives Program, which I’ve been leading since 2014. The Ini- 
tiatives Program is an effort toward making our projects accessible to diverse 
groups, and addressing issues around access, like race, gender, sexuality, class, 
and ability. We do this by partnering with organizations—like the Internation- 
al Center of Photography!—to make community events that emphasize dialogue 
around social and political issues in the fields of art and technology. 

CC Andthe mission of the Processing Foundation is a primary reason why we want- 
ed you to curate a series of events at the ICP Museum. Can you tell me about 
your motivations for setting up a Fellowship program at the Foundation? 

JH — The Fellowship Program began informally in 2013 with Greg Borenstein, 

Lauren McCarthy, and Wilm Thoben, who were already active members of the 
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CC 


JH 


Processing community. They were offered fellowships as a first iteration of the 
idea to fund new work that was part of their own practices and also aligned 
with projects the Foundation was interested in. This first round was informal in its 
timeline and requirements, and primarily led by the fellows’ own interests. For 
instance, Lauren McCarthy was interested in making a Processing library for Java- 
Script, which would require her to learn how to make it as she went along. Her 
fellowship was extended after a great finish on the first fellowship, and nowis a 
thriving project—p5.js—that the Foundation continues to develop with her. 
Greg Borenstein and Wilm Thoben were hired to complete work on libraries that 
they were already building for their own practices, and which have been in- 
cluded in new releases of the Processing software. 

These projects influenced how the Fellowship Programs first open 
call, in 2015, was structured. For the 2016 Fellowships, we were looking for proj- 
ects that ranged from exploratory research and software development, to 
community outreach initiatives that specifically addressed barriers around ac- 
cess. A fellow’s technical expertise was a lower priority than was their inter- 
est and enthusiasm in exploring a new topic and proposing a project that would 
expand what the Processing community can encompass. A fellow receives 
close mentorship and a stipend of $3,000, at $30/hour for a total of 100 hours, 
which can be completed anytime in a six-month period. 
The structure of your Fellowship Program is really interesting on a number of lev- 
els, not least the clarity of the labor and its remuneration. | don’t think that | 
have seen this clarified to such a degree within the realm of artists’ fellowships. | 
also wondered if you could also say more about the ethos of your Fellowship 
Program and specifically what you are suggesting for creative relationships with 
technology, what it says about technical expertise at this juncture of social 
history. | may be projecting here but it makes me think about the role of artists in 
technology and the breaking down of barriers to access. 
| love this question! Yes, the inclusion of how the fellows’ labor is paid for, and the 
specifics—or lack thereof—around when and where it can be performed, are 
directly related to how both open-source projects and artistic practices tend to 
function. Open-source projects are, by definition, entirely community made, 
maintained, and operated. They are based on volunteer systems, in that they re- 
quire a lot of devotion and free and unpaid time. You might have a day job, 
and work on open-source on the weekends or at night; you might have some time 
between freelance work where you devote every waking hour to the project. 
But you do so because you are emotionally invested and you are part of a com- 
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munity who is too. This is, of course, also a lot like artistic practices: the precarity 
of them, the necessity that you be so devoted you are willing to forgo money 

for your labor, but also the inspiration, enthusiasm, and relationships that keep 
you committed. Our fellowship program wants to highlight the good parts of 
this model—the passion and devotion, the community involvement—while trying 
to mitigate the bad—the unpaid labor. 

You're right that our program is based on an idea of how technology can 
be both a viable artistic medium as well as a model for sociality. The Adobe 
model-that software for creative work is expensive and proprietary, and howit’s 
built is kept hidden from those who use it—represents everything we are try- 
ing not to do. This comes from a belief that software is a medium and a tool, and 
learning to program can bea creative, exploratory practice. 

We are working with the question: What happens when artists, individu- 
ally and as a collective, make their own tools? This is less about having tech- 
nical expertise, per se, and more about wanting to participate in the process of 
building something, and learning the technical skills as a result. It also points 
to the fact that a community is a helpful and perhaps necessary component to 
the development of anew medium-— as the history of photography as ame- 
dium also reveals. 
| suspect | have responded so much to the work that you are doing at the 
Processing Foundation in part because it’s such a shining example (and a par- 
allel to photography) of perceiving software as a medium and then deeply 
considering how this new medium could be a tool for social change. Can you tell 
me about the kinds of projects that the Processing Fellows are developing 
with you? 

We are very excited about our 2016 Fellows, as this was the first time we held 
an open call for applications. For 2016, we awarded five fellowships—our most 
to date. 

Allison Parrishis a poet who writes with code, or, you could say, a compu- 
ter programmer who writes poetry. Her fellowship has been to develop a ver- 
sion of Processing that is written in the programming language Python. 

Claire Kearney-Volpe’s fellowship work extends her research at the 
Ability Lab at NYU, which has advanced our software toward being accessible for 
blind and visually impaired people. It’s an important question to consider 
what “visual programming” and “visual art” are, and how they can be newly con- 
ceived, from this perspective. 
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The Digital Citizens’ Lab, a design collective that focuses on civic technology, 
created tools for educators that can meet the needs of historically under- 
served children of color. They have been working onan interactive game, illus- 
trated with comics, whose narrative can be re-written as the game is played. 
Jess Klein and Atul Varma, who are designers interested in “building bridges be- 
tween humans and machines,” have been working on accessibility in p5,js, 

in terms of human-centered usability. 

Luisa Pereira and Tega Brain both teach at the intersections of com- 
puter science, engineering, and art. Their fellowship work has been to develop 
p5,js as a tool for teachers working in interdisciplinary fields, and to deve- 
lop resources, discourse, and a sense of community in this burgeoning field. 
It’s a great honor for ICP to host three of the Processing Foundation Fell- 
ows’ projects as part of Public, Private, Secret’s public programming. Can you 
tell me about the wider picture of public engagement that you have planned 
and what its aims are? 

Likewise! It’s been fantastic to work with you and ICP! Since its founding in 
2001, Processing has enjoyed and relied on a robust community. One of the 
goals of starting the Foundation in 2012 has been to expand that commu- 
nity to groups who might not yet have felt invited into it. This feeling can happen 
for many reasons, from lack of resources, to impenetrable clique-ish vibes, 

to micro-aggressions, etc. In the fields of art and tech, the word “diversity” is of- 
ten deployed these days as a business mandate, as something that will be 
better for the company first, its users second. We're striving toward a kind of di- 
versity that is cultivated from a grassroots model: an effort toward diversity 

that is sensitive to why there’s been a lack of it in the first place, and encourages 
the nuanced process of building something different. “Diversity” has little 
consequence if it is not responsive and supportive to the specificities of differ- 
ent groups. The aims for our public engagement programs are very much 
informed by this, and so strive to be human-scaled, collaborative, and shaped by 
discussion and interdependency within and between different communities. 
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Ascreenshot of the Processing site showing the 
article titled “Sound.” 

Wilm Thoben developed a new core 
Sound library from fall 2013 through 
winter 2014. This library was also 


Processing Sound Library, Lauren Lee McCarthy started the 


2013, Wilm Thoben. 


/ Processing ae 


released with Processing 3.0, provid- 


ing a simple way to work with aud- 

io. It can play, analyze, and synthesize 
sound. The library comes with a 
collection of oscillators for basic wave 
forms, a variety of noise gener- 
ators, and effects and filters to alter 
sound files and other generated 
sounds. The syntax is minimal to make 


it easy for beginners who want 


a straightforward way to add some 
sound to their Processing sketch- 


es! 
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White text that reads “p5*” ona hot pink, 
square background. 


work that has now become p5,js 


in spring, sum- 
mer, and fall 
2013. p5jsisa 
JavaScript li- 
brary for creative 
coding, with 


afocus on making Ascreenshot of four frames of the same face but 


coding access- 
ible and inclusive 
for artists, de- 
signers, educa- 


tors, beginners, and anyone 
else! p5.js is free and open-source 
because we believe software, 
and the tools to learn it, should be 
accessible to everyone. 

Using the metaphor of a 
sketch, p5.js has a full set of 
drawing functionality using the HTML 
5 canvas element. You're not limi- 
ted to the drawing canvas though. You 
can think of your whole browser 
page as your sketch, including HTML 
5 objects for text, input, video, 
webcam, and sound. 

pd.js draws inspiration, 
wisdom, and guidance from its pre- 
cursor Processing. However, it 
is anew interpretation, not an emula- 


tion or port. We don’t aim to match 


p5.js, 2013, Lauren Lee 
McCarthy. 


the web. 
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Processing’s set of functionality ex- 
actly, allowing ourselves space 
to deviate and grow in the context of 


OpenCV for 

Processing, 2013, 

Greg Borenstein. 

Greg Borenstein expanded and re- 
leased the OpenCV library for 
Processing in spring and summer 
2013. The library is based on 
OpenCV's official Java bindings. It 
attempts to provide convenient 
wrappers for common OpenCV func- also a version in Spanish! 


with different contrast and brightness levels 

ina pop-up windowtitled “BrightnessContrast.” 
The top-left frame is in color with low contrast 
and high brightness, the top-right is in color with 
low contrast and brightness, the bottom-left 

is in gray tones with high contrast and low bright- 
ness, and the bottom-right is in gray tones with 
high contrast and brightness. 

tions that are friendly to beginners 
and feel familiar to the Processing 


environment. 


FEL Learning p5.js, 2016, 
005 Tega Brain and Luisa 

Pereira. 

Working with a number of collaborta- 
tors, Tega Brain and Luisa Pereira 
ported many tutorials from Process- 
ing and created some new ones, 

too. They also revamped the p65 tutor- 
ials page, adding new resources 

and organizing the information to be 
more easily navigable. 

One of the most exciting ad- 
ditions was the creation of a video 
tutorial that provides a beginner-level 
introduction to developing the 
p5.js library. Itis a goal with p5.js that 
anyone who is interested is able 
to help build the platform. However, 
all of the files and conventions of 
the p5.js development environment 
can be confusing for someone 
new to the project. Luisa’s illustrated 
video makes no assumptions 
about what someone might already 
know, explaining the file structure 
and development tools and process- 
es clearly and concisely. There’s 
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Ahand drawing of the p5.js logo, with someone’s 
hands in the process of writing “Looking” 
underneath it. 


Their work concluded with a 
Learning to Teach panel led by Tega 
at the International Center of Pho- 
tography. The panel, with educators 
De Angela Duff (New York Univers- 
ity), Aankit Patel (NYC Department of 
Education), and David Sheinkopf 
(Pioneer Works), focused on pedago- 
gy and the creation of environ- 
ments and tools for learning interdi- 
sciplinary computational arts 
practices in universities, high schools, 
and creative communities. 


FEL Friendly Errors, 
006 2016, Jess Klein and Atul 
Varma. 
Jess Klein and Atul Varma had the 
goal of “making p5.js the most 
helpful JavaScript library in the world” 
by improving its friendly error 
system through the lens of human- 
centered design. They began by 
observing the most common errors 
beginners encounter through 
learning and teaching p5 themselves, 
and observing others doing so. 
Jess, new to p5,js, began 
by reading the documentation 
materials and trying to follow the tu- 
torials to create her own sketches. 
As she worked, she identified the con- 
fusing parts and pain points of 
the platform and learning materials. 
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Jess's workshows copying and pasting code fromaweb- 
that you need site into their own editors to see 
notbeanexpert the example inaction. In response, 
programmer he created p5.js widget, a reus- 
tocontributeto able tool that makes it easy to embed 
development, editable p5.js sketches in blog 
and thatactually posts, interactive curricula, and oth- 
abeginnercan _ erplaces. 
offer insights that 
™™" someonemore FEL 
familiar withthe 007 Accessibility Project, 2016, 
system does not have. Claire Kearney-Volpe. 
The next step of the project The goal of Claire Kearney-Volpe’s 
was to use their insights to devise work was to make the forthcom- 
new ways of making the p5,js library ing p5.js editor, learning modules, 
even more helpful. Atul and Jess and web content usable by peo- 
madea number ofimprovements to ple who are blind or visually impaired. 
p5.js error reporting, trying to Working with an advisory panel of 
catchcommonerrors and provide — users and experts in the field, Claire 
more information about how to researched, designed, deve- 
resolve them. loped, and tested prototypes of inter- 
For example, with faces for the p5.js editor and 
JavaScript, itis easy to overwrite learning resources. The aim was to 
existing variable or function make them accessible across a 
names without knowingit. This would variety of browsers, operating sys- 
cause a previously defined vari- tems and assistive technologies. 
able or function to fail or work incor- Some of the most interest- 
rectly, causing much confusion. ing and experimental work in- 
To remedy this, they added function- volved the output of the editor, origin- 
ality that would notice if the user ally an HTML canvas that was im- 
attempts to overwrite ap5.js variable penetrable by screen readers (a soft- 
or function, and warn them of ware application that converts 
what was happening. text on a page into audio speech). 
For example, the following sketch: Claire, along 
with Mathura Gov- 
indarajan and 
Cassie Tarakjian, 
worked on cre- 
ating a “Shadow 
DOM’ that dy- 
namically inter- 
prets the visual and spatial out- 
In observing teaching sessions, Atul puts onscreen and renders them 
noticed that demonstrating and into atext description. 
sharing simple examples in class was The preferences panel of 
often unwieldy — they were hard to the editor allows the user to 
format, and often required students choose from various types of feed- 
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The Processing 


function setup() { 
text += "blarg’; 
logs this warning: 


You just changed the value of "text", which was a pS function. 
This could cause problems later if you're not careful. 


Hopefully this change will make it easier for users to debug their sketches. 


Documentation of new p5.js friendly errors. 


Preferences x 


Text Size 


Indentation Amount 


Spaces 
— 2 + 


Autosave 
On 


Accessible Text-based Canvas 
off 


The preferences panel that includes accessibility 
options for the p5.js web editor. The different 
settings read “Text Size,” “Indentation Amount,” 


“Autosave,” “Theme,” “Lint Warning Sound,” 


and “Accessible Text-based Canvas.” 


back based on what type of sketch 
they are creating. For example, 

if they are making a static drawing, 
they can choose to have the can- 
vas described in plain text. If they are 
creating an animation, they can 
choose to be alerted when objects 
pass into particular areas of the 
canvas. Stay tuned for the release of 
the p5.js web editor in 2017, which 
will include all of these features! 

The fellows ended up 
collaborating in ways that drew on 
each of their individual projects. 

In the Signing Coders workshop ser- 
ies led by p5.js collaborator Taey- 
oon Choi, Luisa Pereira, Atul Varma, 
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and Claire Kearney-Volpe joined for- 
ces to teach p5.js to who that are 
deaf or hard of hearing. They experi- 
mented with a variety of custom 
learning tools and activities, 
iteratively developed over the series. 


FEL Coding Comic, 2016, 
008 Digital Citizens Lab (Evan 

Wu, Sharon Lee De La 

Cruz, and Leslie Martinez). 

The Digital Citizens 
Lab, consisting of Evan Wu, Sharon 
Lee De La Cruz, and Leslie Mar- 
tinez, sought to use p5.js as a tool for 
outreach and education, specif- 
ically designed for children of immi- 
grants and people of color. They 
describe the goals of their Coding 
Comic project as follows: 

“The ed-tech industry does 
not consider the education in- 
equity that urban children of color 
face. The industry assumes that 
there is a standard of education that 
all Americans are receiving and 
then they build products based on 
this assumption. Coding Comic 
is atool that emphasizes the logic be- 
hind coding instead of actual 
coding languages. Our goal is to 


rs 
oval 


Ascene from the Coding Comic web application 
consisting of three panels. The top panel 
contains acharacter making spooky hands witha 
speech bubble that reads “El Cuco.” The 

bottom panel contains three children in bed with 
scared expressions. The right panel contains 
atext box titled “Narrator” and reads: “The story 
scared the kids and before they knewit, it was 
time to go to sleep.” 


fg 
i 
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create digital tools and resources for 
educators that can meet the 

needs of historically underserved 
children of color.” 

They developed a platform 
where children can rewrite and 
re-visualize a narrative by changing 
the logic of events, thus learning 
about coding in an implicit and intui- 
tive way. When they understood 
the logic of the story and placed the 
correct elements or “variables” 
in the frame, they were rewarded with 
animations which reinforced their 
understanding. 

The Digital Citizens 
Lab recently presented their Coding 
Comic project and held a panel 
to discuss the challenges and working 
strategies for STEM teaching in 
schools with invited educators at the 
International Center of Photo- 


graphy. 


FEL Processing.py, 
009 2016, Allison 

Parrish. 
Allison Parrish’s Fellowship prop- 
osal included a wide range of improve- 
ments for the Processing. py proj- 
ect. Processing was initially released 
with a Java-based syntax, and 
with a language of graphical primi- 
tives that took inspiration from 
OpenGL, Postscript, Design By Num- 
bers, and other sources. With 
the gradual addition of alternative pro- 
gramming interfaces — including 
JavaScript and Ruby — it has become 
increasingly clear that Processing 
isn’t a single language, but rather, an 
arts-oriented approach to learn- 
ing, teaching, and making things with 
code. Jonathan Feinberg start- 
ed Processing.py to extend the ideas 
behind Processing into Python. 
Contributors, including Allison, have 
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been instrumental to its current itera- Spanish. Sylvia Aguifiaga and Vanes- Another goal of the fellowship was to 
tion as a Mode for Processing 3. saLandes expanded, iterated,and advocate for an understanding 
Allison's fellowship work — improved DIY Girls’ current Process- of Free (Libre) Open-Source Software 
was highly technical, but also ing curriculum. They plannedweek- (FLOSS) culture in design and the 
focused on education. In additionto longcreative codingcamps for girls arts. With the software stack that, for 
fixing a number of issues with andusedtheirfeedbacktofurther example, the Raspberry Pi runs 
Processing.py, she created two new iterate andimprove the material. The on—i.e. GNU/Linux — being devel- 
Processing.py tutorials, “Pro- creation and implementation of oped in a cooperative manner, 
cessing.pyonthe Command Line” __ their p5.js curriculum and zine broad- Gottfried believes that it’s important 
which shows how to break free ened the scope ofimpactwith girls — for young designers and develop- 
fromthe Processing|IDEto develop inunderserved areas of Los Angeles _ ers to be able to navigate this space 
Processing.py sketches on the and in Mexico. Their bilingual zine and to engage with these com- 
commandline, and “Python, Jython wasastandalone resource for girlsto munities in informed ways. 
and Java,” which covers how explore — a tool that encourages 


Processing.py brings together Py- _self-ledlearning and awakens alove FEL Everyone Can Code: A Cre- 


thon, Jython, and Java. for code. 012 ative Coding Curriculum 
for Students with Low Com- 
FEL iManos ala obra! FEL Processing on ARM, puter Literacy, 2017, 


010 Empecemos. (Creative 011 2017, Gottfried Haider, 
Coding in p5.js), 2017, Mentored by Ben Fry. 
DIY Girls (Sylvia Aguifiaga Devices suchas the Raspberry Pi 


Niklas Peters, Mentored 
by Daniel Shiffman. 
Through the Processing Fellowship, 


and Vanessa Landes), and the C.H.I.P. are promising Niklas Peterssought to make cod- 
Mentored by Lauren vehicles for using codeinenviron- ing more accessible for people with 
McCarthy and Jesse ments such as teaching and in- low computer literacy. Learners 


Cahn-Thompson. stallation art. Inthe context of every- from marginalized groups often lack 
day life, their ability to execute a basic familiarity with compu- 


custom code sketches willalsolend ters; evenif they become more com- 


CREATIVE itself to ways of actively reflect- fortable using computers, cod- 

Fs) a ing upon an area thatisincreasingly ing can seem foreign and inaccessi- 
: > ts 0 permeated by rather opaque ble. By developing a curriculum 
Bee 4 technology, suchas Amazon Echo __ that builds general computer skills 


or Google Home. and demonstrates the power 


Gottfried Haider continued (and fun!) of coding from the start of 
alearner’s computing experience, 


to build out Processing’s ability 

to run sketches on those small, ARM- 
based computers. With many 

pieces of the puzzle already in place, 
suchas the ability to talk to 

external hardware (Hardware I/O 
library) or accelerated video- 

DIY Girls seeks to increase girls’ in- decoding (GL Video library), empha- 
terest and success in STEAM sis was placed on making it eas- 
through new educational experien- _ ier to get started and to develop the 
ces and mentor relationships. tools and libraries needed for “ 
Their project involved ap5.js(6-8 students, designers, and hobbyists Programming a Raspberry Pi remotely (using the 
grade) curriculum development to engage with the aforemen- pioneer: ioe 


‘ Bake od : : The Raspberry Piin focus witha 
and translation of the p5.js zine into _ tioned areas of interest. blurred view of a laptop. 
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Zine cover design by Nisa Karnsomport. 
Abook cover with blue, red, and 
yellow shapes and gradients. The title, 
“Creative Coding Camp,” runs around the bor- 
der of the book. 


Five South African high school students sit- 
ting at computers getting familiar with the mouse 
and menus by using MS Paint. 


participants saw coding as a way 

to express themselves and as a nat- 
ural extension of using a compu- 
ter. The curriculum was piloted with 
high school students in Johan- 
nesburg, South Africa. 


FEL Community and Code, 

013 2017, Saskia Freeke, 
Mentored by Phoenix Per- 
ry and Johanna Hedva. 


i 
Women participating in a workshop and sitting at 
their laptops 

In-person learning can be highly 
valuable to create a sense of commu 
nity and to lower the barrier of 


learning anew tool. To encourage wo- | 


mento explore coding as a tool 

to express themselves in creative 
ways, Saskia Freeke developed, 
organized, and created a series of 
workshops to teach pd,js in 

person to women, non-binary, and 
femme-identifying people in Lon- 
don and Europe, in collaboration with 
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Code Liberation. 
They worked 
together with on- 
aT lyone simple 
mission: Teach 
women, non- 
binary, femme, 
and girl- 

© identifying people 
* toprogram us- 
ing creativity as a 
pedagogical 
approach. Workshops in creation of 
digital games and creative tech- 
nologies, game jams, game night, and 
social networking events offered 

an informal setting for networking 
and community bonding to en- 
courage participation. 

The workshops are fo- 
cused on creating interactive playful 
artworks in p5.js and encourag- 
ing women to explore coding to ex- 
press themselves in creative 
ways. The workshops will establish a 
firm introduction to the library 
and programming basics. 


FEL Creative Coding with p5.js 

014 for Prisons in Washington 
State, 2017, Susan Evans, 

Mentored by Rhazes Spell. 


Volunteers sharing and debriefing after a day 
of volunteering. They travelled from the greater 
Seattle area to Clallam Bay to inspire and 
mentor students. 

Agroup of people sitting on 
atruck smiling. 


People in prison deserve open ac- 
cess to education, especially 
computer science education, which 
opens access to high-paying 

jobs. Susan Evans crafted and offer- 
eda series of classes in Washing- 
ton State prisons using p5.js. Since 
people in prison have limited ac- 
cess to computers and no internet 
access, Susan developed a pa- 

per curriculum to ensure learning 
could happen beyond the class- 
room. Assignments and activities 
engaged and supported stu- 

dents on their path to learning to 
code. 


FEL Ap5.js Web Editor for 
015 2017, 2017, Cassie Tarak- 

ajian, Mentored by 

Daniel Shiffman and 

Lauren McCarthy. 
The p5.js Web Editor is an in-browser 
interactive development envi- 
ronment for writing p5.js sketches. It 
aims to lower the bar for creative 
coding. Users can start writing p5.js 
by simply opening a browser win- 
dow, without the need to download 
software or do any configuration. 
This makes it a great entry point for 
beginners to p5,js. It does this 

lm while maintaining 

a full set of feat- 
ures, like working 
with media 
files and other 
JavaScript 
libraries. When 
users be- 
come more ad- 
vanced, the 
editor makes it 
easy to export their work to more 
complex tools. Because web editor 
sketches live online, they are 
more shareable than local files — 
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which makes it easier for users to 
showcase their work and get 
help from the online community. 
For these reasons, the editor 

is also a great teaching tool. Itis 
free to use anditis an open- 
source project. 


PSs @ = 


Ascreenshot of the p5.js web editor displaying 
code and the respective sketch. 


FEL Features and Fixes in 
016 the p5,js Editor, 2017, 
Andrew Nicolaou. 
Andrew worked on the p5.js Web 
Editor. He worked on general 
enhancements and bug fixes to the 
existing Editor. He also explored 
ways to make the feedback loop be- 
tween writing code and seeing 
the possible outcomes as short as 
possible. 
The aim was to make it eas- 
ier to think through, sketch out, 
and iterate on ideas. This could range 
from surfacing available p5.js 
function parameters through auto- 
complete to more exotic Ul ele- 
ments overlaid on the code for mani- 
pulating and picking values. 


p5js > O= 


100) ¢ 
Ascreenshot of the top portion of the p5.js Web 
Editor. One of the features added is a small 
“HTTPS” checkbox that switches between HTTP 
and HTTPS protocols on a per-sketch basis. 


FEL Ap5.js Dissection Manual, 
017 2018, Vijith Assar, 
Mentored by Lauren 
McCarthy. 
Vijith Assar treated the p5 code rep- 
ository as an editorial project, 
working on internal developer-facing 
_  documenta- 
tion of the archi- 
tecture and 
guiding principles 
in order to 
help future open- 
source con- 
tributors. 

The p5 
reference manual 
is thorough, 

but it is also primarily aimed at users, 
which still leaves a barrier to entry 


for developers interested in contribu- 


ting to the p5.js core. To help 
with the latter, Vijith worked ona set 


Skeleton 


Ascreenshot of the resulting documentation 
published on GitHub. 

of complementary developer- 
facing documentation materials cov- 
ering the architecture and 

guiding principles of p5.js, spread 
across a combination of the re- 
pository, wiki, code comments, and 
other sources. Developing 

clearer explanatory materials made 
it easier for interested develop- 

ers to understand the software and 
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subsequently start contributing. This 
helped speed up the pace of dev- 
elopment and invited a more diverse 
base of contributors. 


FEL SuaCode: Breaking 
018 the Coding Barrier in Africa 
with Smartphones, 2018, 
George Boateng, Mentored 
by Niklas Peters. 
George Boateng’s projectis a pilot 
of Nsesa Foundation’s ambitious 
program SuaCode, an online course 
to teach millions across Africa 
how to code via smartphones. This 
project aims to take advantage 
of the proliferation of smartphones 
to address Africa's digital gap 
by introducing high school and col- 
lege students in Ghana to pro- 
gramming using the Processing 
language. 
In this project, George dev- 
eloped a coding curriculum based 
on the Processing programming lan- 
guage, and then delivered it 
through a pilot program to 30 high 
school and college students, 
who have no programming experi- 
ence, living in different parts 
of Ghana. The programming course 
introduced students to core 
programming concepts in a visual 
and fun way through game 


Two pairs of hands holding smartphones 
displaying code for Processing sketches. 
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development. Curriculum was deli- 
vered as an online course pri- 
marily through smartphones and al- 
so computers via the free learn- 

ing management system, Google 
Classroom. Students coded up 

the assignments using the Process- 
ing desktop app (for students 

using computers) and various mobile- 
based Processing apps such as 
APDE (for Android) and Processing 
iCompiler (for iOS). Students 
submitted assignments for grading 
and feedback as they went through 
the course. The course duration was 
about 10-14 hours total. At the 

end of the course, students devel- 
oped core programming skills 

and built agame in the process. 


FEL Working on the p5. 
019 accessibility 
Project, 2018, Mathura 
Govindarajan and 
Luis Morales-Navarro, 
Mentored by Claire 
Kearney-Volpe. 
p5-accessibility aims to make 
p5 and its community more acces- 
sible to people who are blind 
and visually impaired through the 
adaptation, development, and 
implementation of tutorials, docu- 
mentation, and learning resour- 
ces; maintenance of the accessibil- 
ity features of editor.p5js.org; 
and the development of a p5 acces- 
sibility library. 
For the past year and a half 
Mathura Govindarajan and Luis 
Morales-Navarro have added feat- 
ures to the p5.js web editor that 
has made it inclusive to people with 
visual impairments. This result- 
edin the creation of the libraries, p5- 
accessibility and colornamer. 
During the fellowship, the fellows 
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pd.Js 


Using p5 with a screen reader 


Screenshot of a tutorial on “Using p5 witha 
screen reader” on pdjs.org. 
fully incorporated these libraries 
to the p5.js widget and p5.js web edit- 
or to increase their accessibility. 
At the same time, they worked on de- 
veloping accessible learning mat- 
erials and ensured that the p5.js doc- 
umentation is fully accessible. 

This fellowship continued 
the Processing Accessibility 
Project started by Claire Kearney- 
Volpe during her 2016 Pro- 
cessing Foundation Fellowship. 


FEL Building Inclusive Learning 
020 Spaces for Students 

and Teachers, 2018, Saber 
Khan, Mentored by 
Daniel Shiffman. 


~ pd.js for Educators 2 


with Saber Khan 


= Hi everyone, I'm Saber Khan. 


Ascreenshot of a YouTube video with a black 
background with white pixel-y shapes. A hot pink 
box with white type reads, “p5.js for Educators 
with Saber Khan.” The caption at the bottom 

of the video reads, “Hi everyone, I’m Saber Khan.” 


Saber Khan’s fell- 
owship project 
was to develop an 
Education 
Outreach Manag- 
er Role at Pro- 
cessing Founda- 
tion. The goal 
of the role was to 
support the 
Processing Foun- 
dation’s engagement with K-12 
educators. Saber created an online 
community for teachers, pub- 
lished curriculum on the Processing 
Foundation website, managed 
relationships with K-12 educators, 
and brought CC Fest to more 
students and teachers. 
With the growth of 

CSforAll, there is alarge demand for 
tools and curricula that students 
and teachers can use. Currently, most 
of the available curricula are of- 
fered either from for-profit ed-tech 
startups or nonprofits backed 
by the technology sector. This has 
led to the development of a CS- 
forAll movement that has inherited 
the biases of the industry, while 
it tries to solve challenges around 

S equity, ac- 
cess, and power. 
The Process- 
ing Foundation 
ey and the com- 
munity of educa- 
tors around it 
are well poised to 
help build an 
independent K-12 
CS community 
and movement 
that takes seriously questions 
of ethics, identity, and creativity. The 
community has a large group of 
committed educators, a commitment 
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to diversity and inclusion, and a criti- 
cal perspective on biases and its 
impact on the marginalized. An Edu- 
cation Outreach Manager can 
help coordinate this effort to build 
better CS education for K-12 
students and teachers. 

Saber began by sharing 


existing p5.js and Processing curricu- 


lum on the Processing Founda- 

tion website, creating an online com- 
munity for educators on Twitter 

and elsewhere, organizing in-person 
events like CC Fests, and manag- 
ing relationships with K-12 educators. 


FEL = pS.js WAH — ARE 
021 «SHER WES 
(Chinese Translation for 
p5.js), 2018, Kenneth 
Lim, Mentored by Xin-Xin. 


languages butit is entirely possible 
to have softwares speak multiple 
languages, once the effort is putin 
to make it so. The hope was that 
this project will eventually lead to 
many more translation efforts. 


FEL Justice Factory: 

022 Data Visualizations For 
Empathy, 2018, Ari 
Melenciano, Mentored 
by Daniel Shiffman. 


Driving while Blace (Uy 
Black drivers in Ferguson Mo if 
fre $5 ‘so more likely 
be pulied over than 
While drivers fan 


Through interaction with data visual- 
izations, the arguments of activ- 

ists are advanced, the awareness of 
the general public is increased, 

and the oppressed are able to more 
easily identify that the injustic- 

es they are facing have a name, com- 
monly experienced by others, 

and are part of asystem, not just 
coincidental. Justice Factory 

is alibrary of design-centric, engag- 
ing, and interactive data visualiza- 
tion templates built with Processing. 


FEL Teaching Processing in AP 

023 Computer Science 
Courses, 2018, Kaitlyn M. 
O'Bryan, Kate Lockwood, 
and Thomas J. Reinartz, Jr., 
Mentored by Casey Reas. 

The APCS-A course covers a subset 


Screenshots of the Processing.org website on 
tablets and iPhones. 


on GitHub with the end goal to 


exhibition; 
the shop. De- 
cused on re- 


soas to ac- 
cess the site via 


mobile devices, thus improving 
overall accessibility; improving con- 
tent visibility, social/commu- 


create acommunity supported APCS- nity features, and overall loading 


Acurriculum in Processing 


time; and developing a style 


thatis perhaps more accessible and guide and listing Ul components 


engaging to a wider variety 
of students. 
Each chapter centered 


around an open-ended projectin Pro- 025 


cessing that aligns with APCS- 
A objectives. Along with the projects, 


required across the site. 


Making Processing 
Available in NYC Schools, 
2018, Courtney Morgan 
and Jose Orea, Mentored 


support forums; 
publications; and 
sign elements fo- 


sponsive design 


Stalgia Grigg, Evelyn Masso, and Lauren 
McCarthy work with five others on laptops at 
desks and tables in a white room. 


nity of open-source contributors to 
realize a 1.0 release of p5,js. 

Stalgia kicked off the fell- 
owship with a focus on WebGL 
stability inprovements, expanding 
developer documentation, and 
creating new channels of communi- 
cation for contributors. 

Evelyn also focused on var- 


Kenneth Lim’s fellowship pro- Anillustration ofawhitemaleandBlackmale of the Java programming lan- 

ject aimed to provide a translation of peal ee beet al ean tia guage, which can be difficult for stu- 
. . river's neck, representing the disparity be- A 

the p5,js website anddocumenta- tween races when being pulled over by police. dents to engage with. Proces- 

tioninto Chinese, breaking down the The Black male's necks figuratively 85 per- sing can support a wider range of 

language barrier to learning to cent longer than the white male's neck. ae, ; [3 

code, and providing astarting point Justice Factory is an interactive data 


they provided high-level lesson 

plans that provide: outcomesforthe = == 
lesson, alignment with APCS-A ry: Bs 
objectives, project rubrics, and links 

to additional resources. 


ious tooling in the p5.js repository 
. toimprove the p5.js contributor ex- 
perience. 


by Saber Khan. 


FEL Expanding SuaCode to 
027 Teach African Students to 


to maintain said translation. visualization tool that high- FEL Renovating the Proces- Code on Smartphones, 
Rather than trying toinclude lights social justice issues and hu- 024 sing.org Website, 2018, Kir- 2019, Prince Steven Annor, 

people while expecting them to man rights violations, with the it Tanna, Mentored by lac una rite ont Mentored by George 

know English, an inclusive and diverse intention to serve as a tool to ad- Scott Murray. a eiedenine srlerion onlienite ga Boateng. 


community should speak multiple 
languages. It’s a bit of a stretch to ex- 
pect people to understand many 


vance the fights of activists. 
Ari Melenciano has always 
believed that data visualizations 
~ are a language of 


Kirit Tanna’s fellowship project browser opentoaGoogleDocshowingales- During 2018, Processing Founda- 
was to upgrade and enhance the over- 80" Planfor coding a drawing applicationinpS. —_tign fellow George Boateng piloted 
all user-experience on the pro- José Orea and Courtney Morgan SuaCode, a smartphone-based 

cessing.org website and its offshoots worked with the NYC Dept. of Educa- coding course with 30 high school 


the oppressed: to be consistent, responsive, tion to make their Introduction and college students in Ghana. 
she recognizes accessible, and forward-looking. to Computational Media highschool Having assisted George on the proj- 
the power of = This enabled users to explore curriculum better to educators ect as amember of his team, 


data, particularly Four students at a desk, working on computers. 


the wealth ofinformationonthese — everywhere. Itwasshared publicly Prince Steven Annor’s project sought 


the transfor- students in understanding the websites. In addition, the web- that fall on p5js.org. to build upon that work and scale 
mationofdata content, allowing teachers to add- site accepted contributions from ittomore people. Inthis project, | dev- 
being turned ress the same course objec- the community to support its FEL pd.js 1.0, 2019, eloped an automatic grading 

into easily digest- tives. This project created four chap- growth as aplatformandservedasa 026 Stalgia Grigg and Evelyn system, recruited mentors, and de- 
ible forms of ters of an open-source, project- source of inspiration to its users. Masso, Mentored by livered a smartphone-based on- 
informationand based textbook in Processing that is Planned upgrades affect- Lauren McCarthy. line coding course to introduce pro- 


its potentialto aligned with the APCS-A out- 
reflect the truth. comes. The textbook was released 
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ed: blog, news, and social inte- 
gration; reference and examples; 
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Evelyn Masso and Stalgia Grigg gramming using Processing 
worked alongside the larger commu- to 100 high school and college 


023-027 101 


English and Chinese text on the homepage of 
the p5.js website. 
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students in different parts of the 
African continent. Students 

can access the course lesson notes 
on Google Classroom, a free 
learning management system, and 
then program their assign- 

ments using the Android Proces- 
sing Development Environ- 

ment (APDE) app. The programming 
course introduced students to 
fundamental programming concepts 
in avisual and fun way through 

the development of a Pong game. A 
GitHub repository that contained 
sample Processing sketches which 
illustrated concepts in the course 
were provided to students for clon- 
ing their APDE app. Students 
submitted assignments for grading 
and received feedback as they 
went through the course. At the end 
of the course, students deve- 

loped fundamental programming 
skills and built a Pong game us- 

ing Processing. 


This immediate 
mode avoids 

a per Ul element 
initialization 

and the need of 

| registering 
callbacks. It al- 
lows for ele- 
ments to be cre- 
=) ated on the 

fly, which allows 
for more dy- 
namic interfaces. 
To give acon- 
crete example, “if 
(on(CLICK, button())) printin(“!”)” 


Ateacher points to a projection of the p5.js web- 
site at the front of aclassroom. Rows of stu- 


dents with open laptops look on. would create a button and when click- 
Approximately more than 85 per- ing it would print “!” in the console. 
cent of India’s population lives inthe My goals were to make people more 
lower or middle income bracket, productive by implementing gra- 
which often doesn’t have the resourc- phical user interfaces instead of mak- 
es to afford classes for computer ing them less productive by imple- 
programming. We used Processing menting graphical user interfaces. 
to serve the Indian community, Along with this, making custom 

by translating the p5.js website and styles should be easy and under- 


budding multimedia training initiative 
for TGNC youth, and their hope was 
that this was the first of many classes 
as a part of sucha program. 


FEL Pride Peers Programming 
030 Prosperous Protection, 
aka P5, 2019, Matilda Wy- 
socki, Mentored by 
Daniel Shiffman. 
Matilda Wysocki spent time teach- 
ing trans and gender nonconforming 031 
youth basic programming and de- 
signin a queer, privacy and digital lit- 
eracy context. There was support 
and resources for those who wish to 
deepen their skills as developers 
afterward, to have a tool for self ex- 


FEL Expand and Diversify 

p5.js in China, 2019, Qian- 
qian Ye, Mentored by 
Dorothy Santos. 

My project aimed to make p5.js 
more accessible in China, especially 
within underrepresented women’s 
and non-male identified groups. After 
having the 

pd.js website and 
documenta- 

tion translated in- 
* to Chinese in 
2018 by Founda- 
tion Fellow 
Kenneth Lim, we 
had more work 

to do to activate 

} and cultivate 

the young Pro- 


Many circles drawn within each other overlap 


video sites. | also partnered with oth- 
er female Chinese creative cod- 

ers to host p5.js workshops for girls, 
women, and other non-male iden- 
tified people in China, as well as post- 
ed interviews with role models in 

the Processing and p5.js community 
on Chinese social media. Through- 
out the process, | explored socially 
conscious, culturally sensitive, 

and non-Western models of teaching 
creative coding. By teaching wo- 
men and non-male identified people 
p5.js, we promoted diversity and 
activated marginalized communities 
within China in new ways. | hope 

this project inspired people from oth- 
er minority groups in China to 
participate in the creative coding 
community. 


FEL Coding with Sound and Art 

032 for Middle-School 
Students, 2019, Layla 
Quinones, Mentored 


documentation to Hindi, provid- standable without the need of 

ing p5.js YouTube tutorials in Hindi, reading alot of documentation. | 
and reaching out to non-govern- was hoping to address issues 
mental organizations that emphasize where the web world took a wrong 
and impart software literacy turn. 


throughout the image. Their rings follow a color 
pattern, with purple at the center, then blue, 
green, yellow, orange, and red. 

pression and community building, or 
to just understand the forces shap- 


cessing and p5.js communi- 

ties in China. To counter the fact that 
most online educational resourc- 
es such as YouTube are banned in 
China, | recorded p5.js video 


by Saber Khan. 
i 


Astudent doing his assignment on his phone. 


FEL Making Processing Tools 
028 Accessible to the 
Indian Community, 2019, 
Manaswini Das, Nancy 
Chauhan, and Shaharyar 
Shamshi, Mentored 
by Mathura Govindarajan. 
Based on the most recent UN 
data, the population of India is esti- 
mated at 1.35 billion and 80 
percent reads or understands Hindi. 
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among underprivileged students. 


FEL An Immediate Graphic 
029 User Interface Libra- 

ry for Processing, 2019, 

Doeke Wartena, 

Mentored by Casey Reas. 
Doeke Wartena worked ona 
library for creating a Graphical User 
Interface (GUI). Instead of the 
traditionally retained mode GUI sys- 
tem, this library is using an 
immediate mode (IMGUI) where the 
whole Ul is created each frame. Agraphic in gray, white, and blue, that shows the 
TheIMGUIwas.anideaof Casey Mura- cBfaeterEraynisidezbuesmire ise 
tori back in 2002 and was slowly : 


: of agraphic ofa rectangular ellipse, with a circle 
getting more momentum. inside of it on either the left or right end. 
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tutorials for beginners in Chinese 
and shared them on Chinese 


ing our world alittle better. This proj- 
ect consisted of six-hour classes 
on weekends, but also depended on 
the schedule of the space and stu- 
dents. The space was the Ali Forney 
Center. To supplement the pro- 
gramming and art experience, Mat- 
ilda included guest speakers 
to discuss Al and its impact on soci- 
ety, personal digital security, on- 
line harassment, mass surveillance, 
automation, and work. The class 
projects were adapted tofitthe class's A 4x4 grid of screenshots of Qianqian’s p5.js 
interests and to help facilitate tutorials. The top-leftis a logo that reads “Qtv" in 
discussions around the aboveideas. 2 purple circle. The top-right caption reads: “1 

f nnn Minute Videos in Mandarin / Creative coding, art, 
Matilda was originally asked technology / Available on Bilibili, TikTok, You- 
to teach programming as part of a 


Tube, and Instagram.” 
FELLOWSHIPS 


ie Ateacher points to a projection at the front 


of aclassroom. Three individuals with open lap- 
tops look on. 

This project consisted of writing a cur- 
riculum that taught students 

how to integrate sound, animation, 
and interactivity into a creative 
computational artifact in p5.js. Layla 
Quinones focused on develop- 

ing tools for teachers who have little 
experience teaching topics in 

CS to urban communities. 
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FEL Teaching Digital Dance: 

033 Coding, Graphic De- 
sign, Animation, Dance, 
and Robotics , 2019, 
Emily Fields, Mentored 
by Saber Khan. 


Anindividual holding a closed umbrella looking 
up at a projection of raindrops. 


Emily Fields and her students exper- 
imented with motion detection. 
They created an interactive projec- 
tion that dancers used in their 


techniques vs. the traditional “tutor- 
ial-based” model. We hypothe- 
sized that using creative techniques 
to teach code will result in fewer 
dropout rates, more engagement 
from communities who have not 
learned to code 
before, and 
more motivation 
for educators 
to be creative in 
their teaching 
ways, especially 
incases where 
they themselves 
“ will have to 
learn to code before teaching chil- 
dren how to code. 

This project focused ona 
specific community landscape 
with very little to no knowledge of 
code, in remote villages in the 


school’s annual Digital Dance perfor- rural southern regions of Morocco. 


mance. Emily used her findings 


The context there was particular: 


to create a unit of study on motion for There were no educators qualified to 


the NYC DOE to share with fellow 
computer science teachers. 


FEL Make-IT V2: Enabling 
034 universal access 
to technology, 2020, 
Abdellah lraamane, 
Mentored by 
George Boateng. 


& 


me 
~ 


_ 


Two children, one of whomis wearing red, drawon FEL 


white paper using paint and colored crayons. 
We explored the advantages and 
challenges of learning to code 

for first-timers using creative coding 


teach code in the traditional mod- 
el. The context of the project was also 
unique in the sense that the target 
community does not speak the offi- 
cial language of the country, and 
hence we researched the possibility 
of teaching both the language 
and code through Processing soft- 
ware simultaneously. 

In the grand scheme of 


" things, we wanted to achieve 


universal, long-lasting access to 
code, in contrast to the tradi- 

tional solutions that eventually fade 
because the learning curve 
becomes too steep to follow. 


Know Your Rights, 
035 2020, Kalila Shapiro, 
Mentored by Luis 
Morales-Navarro and 
Claire Kearney-Volpe. 
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| used Processing (specifically the 
p5,js library) to develop a website 
called knowyourrights.com, which 
helps people with disabilities 
understand their rights in clear and 
simple visualizations. | highlight- 

ed the disparities in employment and 
quality of life between the disa- 

bled and abled communities, and 
made people feel comfortable 
standing up for themselves when the 
laws that protect them are being 
violated. Despite the fact that the Am- 
ericans with Disabilities Act (the 
ADA) was signed into law nearly 30 
years ago, only 56 percent of 
disabled Americans are employed. 


Astatic image. Set on a blue backgrounds a gray 
building sitting on a field of grass. Next to 

the building is ared wall. Against the building is a 
white ramp and slightly above itis a thin yellow 
handrail. There is text on the screen reading “Ifa 
ramp rises higher that 6,” it must have a handrail.” 
knowyourrights.com is an interac- 
tive online space that clearly 

and concisely displays different 
aspects of the lawin both text 

and visualizations — with specific fo- 
cus onthe sections of the ADA 
that protect students and Section 
504 of the Rehabilitation Act of 
1973. This section was the main fo- 
cus because education remains 
largely inaccessible for many stu- 
dents with disabilities. This is a 
law visualization project, andis a 
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helpful alternative to sites like adata. module, which makes it easy to inter- FEL 


org and ada.gov, which are dense face with deep neural network fro- 
with legal terms. Itis also web access- zen graphs from major frameworks 
ible according to W3 standards. such as TensorFlow and Caffe, 


accessing networks like YOLO, Open- 


FEL Cozy Coding, 2020, 
036 Aren Davey, Mentored by For interactive art instal- 
Daniel Shiffman. lations and other creative proj- 
Cozy Coding is a series of cozy week- ects, George Profenza believes ac- 
ly Twitch streams that hosts in- cess to an updated free open- 
teractive p5,js tutorials andlessons. source library is beneficial for the 
For each stream, there is a cho- Processing community. This is 
sen topic which Aren Davey research- for Processing Java mode or p5.js 
es and demonstrates to viewers. using OpenCV.js. 
Viewers cancode alongwith me via Sparse optical flow (Lucas-Kanade method) 
the p5.js editor, and ask Aren 
questions in the chat and receive 
answers in real time. The envi- 
ronment of the streams is relaxed, 
warm, and nonchalant — this Quality Level: 0.001 
isn’'taboringclasslecture—sothere @ 
is alot of freedom for the direc- Meee 
tion of the stream. Some of the chos- window size: 9 
enstreams are collaborative <@ 
live-coding jam sessions, where the 
viewers are able to code with me 
ona single project and create some- 
thing interesting together. 


Pose, Face Landmarks, etc. 


Max Level: 0 
e 


Max Features: 275 


if 


Sparse optical flow example displaying green 

points overlaid on top of the porcelain 

cat and book. The green points represent 

tracked features. 

; Such an update is a good foun- 

Many hexagons of varying shades of yellow and dation fort hi ksh 

green are arranged over a grey background. a lon for teaching workshops, cov- 

The code that generates the imageisoverlaidon ering areas suchas: 

top in white and green text. + image filters (e.g., understanding 
convolution/making custom 
kernels) 

+ computer vision basics (frame 
differencing/bg subtraction, color 
tracking, blob detection, etc.) 

+ advanced topics (image classifica- 
tion, facial landmark detection, 
pose estimation, etc.) 


FEL Open Computer Vision for 

037 pd.js and Processing, 
2020, George Profenza, 
Mentored by Golan Levin. 

The latest version of OpenCV has 

alot of extra functionalities. 

One important feature is the DNN 
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based on ofxCv example-flow by Kyle McDonald 


Creative Coding & Compu- 
038 tational Thinking 
for Young Students, 2020, 
Michael O’Connell, 
Mentored by Layla 
Quinones. 
This project sought to curate, create, 
and pilot p5.js activities and les- 
sons to help children ages 8-12 more 
easily learn coding and compu- 
tational thinking. Michael O’Connell 
hoped to better engage students 
by inspiring them to create visually, 
and to develop script-based cod- 
ing skills, and thus go beyond Scratch 
and code.org. Michael drew from 
their training and experience with p5 
and years of teaching coding to 
grade-school students, starting with 
activities like the “first sketch” 
exercise in the p5js.org Get Started 
page. Michael referenced the 
work of other Processing Foundation 
Fellows, including Niklas Peters 
and Layla Quinones, and incorporat- 
ed simple.js and other libraries to 
help make p5.js easier for new young 
coders before they reach middle 
school. Michael then employed these 
exercises with the coding clubs 
they led, allowing them to pilot, iter- 
ate, and collect feedback from 
100+ students. The goal was to make 
coding and computational think- 
ing more broadly accessible and to 
better reach younger students, 
for whom a more traditional script- 
programming curriculum may 
not resonate, including those who 
are eager to learn and have 
unbounded ambition and seek a 


Se 


Zoomtiles of 17 individuals. 
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next step beyond the more struc- 
tured code.org activities 
and the block-based Scratch pro- 
gramming environment. 


FEL p5 for 50+ (p5 for 50 

039 and Beyond), 2020, Inhwa 
Yeom and Seonghyeon 
Kim, Mentored by Qian- 
qian Ye. 


p5ys 


Ascreenshot of p5js.org/ko, the Korean 

translation of p5js.org, with Seonghyon Kim's 
“Hunminjeongeum 2020" as the back- 

ground artwork. 


The project p5 for 50+ (50 and 

beyond) aimed to improve the digital 

literacy and rights of middle- 

aged and older adult creators ina 

non-Anglophone, aging, yet 

highly digitized and tech-centered 

society: South Korea. Along with 

the Korean translation of the p5 web- 

site, Inhwa Yeom and Seonghyeon 

Kim hosted a weekly workshop that 

specifically targets participants 

of the upper age group who face even 

greater linguistic and emotional 

barriers than younger generations 

when it comes to learning coding. 
Experimenting with and de- 

signing learning methodology 

for people around and over 50 is the 

most important challenge to this 

project. Throughout the Fellowship, 

Inhwa and Seonghyeon devel- 

oped and evaluated various learning 


interfaces and interactions, logistics, **+ «=. 


and environment settings of their 
workshop, with aural, audio-visual, 
contextual, and interactive ele- 
ments of p5. As one methodology, 
p5 and creative coding were con- 
textualized at the workshop as amed- 
ium for addressing personal and 
social issues constructed from the 
participants’ technological sur- 
roundings. With 
the p5 art- 
works they cre- 
ate, the par- 
ticipants were 
expected 
to imagine their 
own online 
gallery, agora, 
asylum, ar- 
Ls chive, and mar- 
ketplace 
where they could voice their exper- 
iences of being 50+. 


FEL Critical Machine 
040 Learning with ml5.js, 2020, 
Achim Koh, Mentored 
by Joey Lee. 
Critical Machine Learning with ml5 
isa series of educational material that 
enables a critical understanding 
and use of machine learning and arti- 
ficial intelligence, with a focus on 
the socialimplications of said techno- 
logies. The material is produced 
in Korean and English, for local us- 
age and broader access. 
The developed material 
is activated through a series 
of workshops in Seoul. The work- 
shops are accompanied by a 
discussion-oriented event around 
critical perspectives on soft- 
ware, ML, and Al. All events aim at 
fostering a more inclusive envi- 
ronment in the Korean tech context. 
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Pas obi 


Aweb browser displays the p5 web editor. The 
source code is displayed on the left side of 
the screen. The result of the executed codeis 
displayed on the right side: the title reads 


“Image classification using MobileNet and p5.js.” 


Animage of a person from the chest up, whose 
face is covered by a robot emoji, is shown. Under- 
neath, the caption reads: “Label: joystick, Con- 
fidence: 0.26, Label: ski mask, Confidence: 0.24, 
Label: soap dispenser, Confidence: 0.07.” 

The projectis partly aresponse 

to industry- and government-driven 
Alinitiatives, which typically 

cast Al-related education as voca- 
tional, as previous coding edu- 
cation initiatives tended to do with 
software programming. Ulti- 

mately, this work builds resources 
that help people think critical- 

ly about technology, power, and 
knowledge. 


FEL DIY Al: ml5 Community 

041 Starter Kit, 2020, Emily Mar- 
tinez, Mentored by Lydia 
Jessup. 

DIY Al: ml5 Community Starter 

Kitis a toolkit that teaches beginners 

how to set up and train an artifi- 

cial intelligence using m6. The kit 

includes instructions for how to 

find, clean, and process data to feed 

into amachine-learning algor- 

ithm. The step-by-step guide also 

includes guidelines for running 

small workshops where people can 

teach each other how to de- 

sign and build their own artificial 
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Image classification using MobileNet and p5.js 


intelligence without having to rely on 


= “experts.” The first training mod- 


ule is focused on text-based, conver- 
sational chatbots using multi- 
layer Recurrent Neural Networks 
(LSTM, RNN). 

As co-creator of Queer Al 
and amember of Color Coded, 
Emily Martinez is motivated to devel- 
op tools and materials for queer, 
BIPOC, and other marginalized com- 
munities interested in working 
with technologies like artificial intell- 
igence for their own purposes, 
pleasure, and empowerment. As crit- 
ical conversations continue to un- 
fold around the limited access, risks, 
and harms of artificial intelli- 
gence, their hope is that together, 
we can build counter-examples 
tending to the poetics, play, self-dis- 
covery, and world-building poten- 
tial of artificial intelligence with curio- 
sity and care. 


bry AI > 


DIY Al: ML5 Community Starter Kit 


Webpage reads DIY Al: ML5 Community 
Starter Kit. 


FEL Fine-tuning ml5,js: 

042 Friendlier Code & 
Development Processes, 
2020, Bomani Oseni 
McClendon, Mentored by 
Joey Lee. 

Bomani Oseni McClendon worked 

with mentor Joey Lee to con- 

tribute a variety of improvements to 

the ml5,js core library and web- 

site. As ml5.js matures, they were 
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focused on stability and addressing 
community needs, with the goal 
of making ml5.js more accessible to 
a wider variety of contributors 
and creators. 

Our changes began 
with a simplification of the release 
process for the library so that 
contributors can more easily release 
new versions of ml5,js. We fo- 
cused onimproving the parity be- 
tween our library features and 
our documentation, and additionally, 
made improvements to our auto- 
mated testing workflow. Lastly, we 
built tools to improve our inte- 
grations with the p5.js Web Editor, 
Teachable Machine, Typescript- 
based projects, Node.js, and more. 

An additional focus 
for our work related to increasing the 
visibility of our values and com- 
munity statement, which included 
a variety of improvements to the 
ml5.js website. Throughout the proj- 
ect, Bomani helped to support 
our community's requests through 
GitHub issues and push im- 
provements to code quality and de- 
sign pattern consistency through- 
out the library. We believe that these 


re 


Automatic facial occlusion using the ml5.js 
Facemesh model and p5.js. Original base photo 
by Edrick Chu. 

Aperson sits ina chair. Their entire 
face is covered by a black shape, with white dots 
positioned over key facial features. 


changes would enhance the exper- 
ience for people using ml5.js 
and open source contributors. 


FEL ml5.js Examples,2020, 
043 Andreas Refsgaard, 
Mentored by Yining Shi. 

| proposed to make a new set of 

playful interactive examples to sup- 

port the ml5.js library, website, 

and community. The aim was to show- 

case the creative potential of us- 

ing ml5 and attract even more peo- 

ple to use the library througha 

series of simple and more advanced 

examples: 

+ Simple interactive examples — 
Some people might be interested 
in a particular technique, but do 
not know how to get started with it. 
Other people do not fully under- 
stand certain techniques or know 
what to build with them, and 
need to see them in action in order 
to come up with ideas of their 
own. These simple examples build 
ontop of existing ml5.js exam- 
ples, by adding just enough addi- 
tional code to make them more 
playful or engaging. 

+ Advanced artistic examples — 

The more ad- 

vanced ex- 

amples goa step 

deeper, eith- 

er by combining 

multiple func- 

tionalities within 

ml5.js or by 

using p5,js to 

make the 

} outputs from ml5 
machine learn- 

ing models even more interesting. 

Compared to the simple exam- 

ples, these examples generally 

are longer and more complex, and 
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Alaptop shows ml5.js code on the left of the 
screen, and an image output. A small keyboard is 
shown to the left. 
therefore are intended to serve 
as inspirational examples rather 
than as tutorial examples for 
beginners. 


FEL Coding with Friends, 2021, 

044 Ambika (Computational 
Mama), Mentored by Sha- 
haryar Shamshi. 


CODING 
WIT 
FRIE 


Square image with ivory background. “Coding 
with Friends” is written in a large size in the center 
with some torus and ring shapes floating around 
the words. 
What does it mean to have a simple 
intimate chat over a shared act- 
ivity? Does creating with code only 
serve its purpose towards an 
output? Can the act of two friends 
coding together mean more 
than a product, a production, or 
a performance? 

Coding with Friends is an 
ongoing series of livestreams 
with womxn makers and creators. 
These are one-on-one ses- 
sions, where Computational Mama 


invites a friend to code together. A 
casual act of coding together 

can be equated to making dim sums 
or folding paper cranes or even 
playing a board game. 

Coding with Friends cas- 
ually and simply claims space for wo- 
mxn creators. The series extends 
theidea ofco-codingas aform of cam- 
araderie, friendship, and self- 
care. Coding with Friends reinforces 
ideas of care, sharing, and con- 
nectedness. What could be more ex- 
citing than extending warmth and 
care through a positive shared exper- 
ience? What could be more provo- 
cative than to build soft, understated, 
and rooted networks of womxn 
creators? What can be more power- 
ful than relationships built in safe, 
creative environments? 

The project gives an 
opportunity for womxn creator com- 
munities and practices around 
creative computation to move away 
from notional ideas of what code 
can produce, who can produce code, 
and where it can be produced. 


FEL Developh p5.js Camp, 
045 2021, Chia Amisola, 

Mentored by 

Dorothy Santos. 
Over 50 percent of information 
technology graduates in the Philip- 
pines are reported to lack pro- 
gramming competencies, and there 
is an absence of expository, pre- 
college technology and art programs 
inthe Philippines. Developoh Camp 
builds on the work of acommunity 
not-for-profit that has been run- 
ning education and innovation pro- 
grams to boost the Philippine 
technology ecosystem since 2016. 
Developh Camp cultivates a life- 
long community for mission-driven 
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Developh's booth at the 2018 Manila Maker Faire. 
Apink keyboard and monitor are 
setup ona bright blue table, with piles of sticker 
sheets and printouts with project details onit. 
Acolor-blocked sticker set of programming jokes 
(one is a heart with “The Art of Computer Pro- 
gramming”), alight pink and blue set with “Girls 
Byte Back,” and a dark blue set with a “RIP se- 
micolon” ona gravestone. Onthe monitor are dem- 
os by Developh members: “Astro Jumper 
Space Shooter Game,” “Halina sa Hapagkain.” 
technologists and creators while pro- 
ducing collaborative projects and 
resources for the larger nation. With 
focus on peer and small slope 
mentorship, emphasis on teaching 
non-technologists code, and ini- 
tiatives rootedin socialimpact, Devel- 
oph Camp uplifts both the art 
and creative code scenes inthe 
Philippines. 
Developh Camp supports 
a cohort of high school/college- 
aged Filipino technologists in pro- 
ducing socially driven, artful 
technology projects built with p5.js. 
At the end of the Camp, an on- 
line exhibit was launched to host 
their work. Outputs included 
biweekly workshops and teaching 
materials open to all (in both 
English and Filipino), co-creating 
streams and events, and the 
frameworkforrunningreplicablecom- 
munity events sensitive to low 
data spaces. 
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After Camp, fellows continued to be 
integrated into the Developh 
community as they further explored 
technology, design, and foun- 
derhood. p5.js is integrated into our 
curriculum, discussion clubs, 
projects, and more. 


FEL PORTAL.WEB — A Cyber 
046 Witch Coven, 2021, 
Cy X, Mentored by 
Johanna Hedva. 


Cy, a dark skin agender person, is sitting on the 
floor wearing a pierced light grey halter 

top and bottoms while holding a lightly lit piece of 
paper of something they'd like to release. 

In front of themis a candelabra with five white lit 
candles, crystals, and an abalone shell. The 
ritual video is framed by the image of a dessert 
and words on the bottom of the screen that 

reads “Release the myth of independence that 
restrain me from seeking help.” 


PORTAL.WEBis a cyber witch coven 
that reimagines our cyber pow- 


ers through the use of emerging, indi- 


genous, and ancestral techno- 
logies. The coven seeks not to esta- 
blish a hierarchy of technolo- 

gies but rather to work with cyber 
witch practices in a way that 
intimately engages our own radical 
imagination, ancestral know- 
ledge, and inner-knowing. 

Cy X researched cyber 
witch practices and theories in order 
to develop a year-long syllabus, 
cyber witch workbook, and series of 
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workshops, performances, collabo- 
rative rituals, and ceremonies, 

which will invite the collective to not 
only interrogate what is /is not 
technology but also to explore new 
ways of learning, breaking, and 
hacking to create tools of our dreams, 
ones that could open new portals 
and celebrate Black, brown, queer, 
and trans folks. 

Alot of technological edu- 
cation currently seems to negate 
knowledge from 
other frame- 
works, cultures, 


ect, through 

acknowledging 

= ‘aworld of 

_ manyworlds,” 

= sought to 

: ~ work within the 
se = framework 

of the pluri-verse, while also acknow- 

ledging that those at the margins 

have often been negatively impact- 

ed by technology. This project 

acknowledges that any form of tech- 

nology education needs to cen- 

ter healing at its core, by connecting 

with our inner selves, including 

care and love at the center, and up- 

lifting ancestral knowledge, while 

imagining and creating new worlds. 


FEL Pé Cinco: Internationaliza- 
047 tion and Popularization 
for Portuguese Speakers, 
2021, Felipe Santos 
Gomes, Julia Brasil, 
Katherine Finn Zander, 
and Marcela Mancino, 
Mentored by 
Claudio Esperanga. 
Brazilian coders, artists, and 
researchers who have self-taught to 


gE thinking. This proj- 


code, have experienced firsthand 
the difficulty in finding educa- 
tional content in our native language, 
Portuguese. This project came 
from the desire to make p5.js access- 
ible to the Portuguese commu- 
nity by translating the p5.js reference. 
Along with the translation, they 
produced a series of short videos 
presenting the project and its 
main features. 

Like previous Process- 
ing Foundation Fellowship projects, 
translation can open up ways 
for more people to contribute, and in 
doing so expand the commun- 
ity, reaching new audiences that oth- 
erwise would not be able to ac- 
access the tool inits full potential. 
This effort aims to encourage 
other projects, translations, and 
educational projects in 
Portuguese. 


(P5458), PE cnca 


Hello! OLE’, 


The p5.js home web page with a pink circle 
surrounding the logo and an arrow pointing to the 
Portuguese pronunciation of “p5” into “pé cinco.” 
Next to the word “Hello” is a translation to 
Portuguese “Ola” followed by a smiley face. 


FEL Indigemoji, 2021, 

048 Akeltye-antheme 
awetyeke, Mentored by 
Yining Shi. 

Akeltye-antheme awetyeke — “teach- 

ing to listen” — explored what it 

would take to teach machines to lis- 

ten and understand Arrernte, a 

traditional Indigenous language of 
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Central Australia. By creating asmall Currently, the p5.js and p5.js web edi- why itis important, as well as how to 


sovereign dataset of Arrernte 
spoken words, we created a web- 
based prototype in p5.js and 

ml5.js to encourage young people to 
speak their own language. In do- 

ing so, we hope to start a conversa- 
tion with machines, to translate 

and explore concepts of machine 
listening, and to consider what 

the implications and potential of that 
might be. 


es 
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Emoji bosses Kathleen Kemarre Wallace, Veron- 
ica Perrule Dobson, and Joel Liddle Perrule. 
Three people sit at a table, laughing. 


FEL Internationalization 

049 Support: Spanish Localiza- 
tion for the Processing 
website, 2021,Omar 
Verduga, Mentored by 
Esteban Sandoval. 


Al 


The Processing Foundation logo, the letter P, is 
accompanied in the top-left corner with the word 
Hola, Spanish for Hello. In the bottom-right 
corner, there is the letter f, pronounced “Enyay,” 
which has come to represent the identity of the 
Spanish language. 


tor websites support translations 

for different languages; however, the 
Processing website includes no 
translations (there is a pull request 
with a German version, which is 
indicative that some other users are 
aware of the opportunity). During 

the GSoC 2020 program under the 
Processing Foundation, Omar 
Verduga completed an international- 
ization solution for the p5 web ed- 
itor, where internationalization was 
studied from a broader context, 

not only on the technical side. Inclu- 
sive and non-gendered language, 
and accessibility through ARIA la- 
bels were topics discussed with 

the community, and a localized ver- 
ion of the p5.js web editor was 
delivered in Spanish. The goal of this 
Fellowship project is to join the 
current efforts in translating the web- 
s 

t 


n 


ite and create guidelines for fu- 
ure contributing members in how to 
organize the translations, while 
delivering a Spanish localized ver- 
sion of the Processing website, 

with the idea of making it more ac- 
cessible to the international 
community and to further promote 
its usage among students of Spa- 
nish (Latin American Spanish, parti- 
cularly) speaking communities. 


FEL Digital Accessibility 


» 050 Syllabus, 2021, Adekemi 


Sijuwade-Ukadike, 

Mentored by Claire 

Kearney-Volpe. 
From Adekemi Sijuawade-Ukadike's 
observation, there are initiatives 
on auniversity level to bring aware- 
ness to digital accessibility. Kemi 
wanted to add to this by creating a 
university-level, open-source 
course model that directly speaks to 
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create accessible digital content 
from the inception of a project, rath- 
er than as an after-thought once 
the project is close to completion. 

The COVID-19 pandemic 
has shifted most of our communica- 
tion into the digital realm. Now 
morethanever, about 61 millionAmer- 
icans who live with a disability are 
relying on digital spaces as an impor- 
tant means of connection and 
survival to health, financial, social, 
and job-related services and 
information. 

Kemi believes that if a 
full-semester immersion to digital ac- 
cessibility is an option for those 
studying interactive and immersive 
experiences, an awareness that 
the DOM, as wellas libraries such as 
p5.js’s accessibility are tools and 
how to use them — would be super 
useful to interaction designers, 
web developers, coders and those 
creating digital experiences. 
Perhaps we can see an influx of ro- 
bust digital projects, not only 
to avoid litigation, but for better in- 
teractions overall. 


Digital 
Accessibility 
Syllabus @ 


rT 


gy 


Agraphic of a handheld device with a green 
screen and the words “Digital Accessibility 
Syllabus” in white font. Accessibility icons in 
black and white. 
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FEL Starter Kit for Teaching 

051 Creative Coding with p5.js, 
2021, Angi Chau, Men- 
tored by Saber Khan. 


PRESS 


ERE 


The text “Press Here” is displayed in dark blue 
and a yellow circle in the middle of the 
screen. The word “Press” is above the yellow 
circle and the word “Here” is below the 
yellow circle. 
As more CS classes are being imple- 
mented across the world (yay!), 
Angi Chau noticed that there are ma- 
ny teachers who are tasked with 
teaching CS, but who never received 
formal training in CS. While there 
are pre-made curricula that educa- 
tors can use (e.g., Google CS 
First, Code.org), Angi wanted to in- 
vestigate the space between 
these “plug and play” options anda 
total blank canvas, and explore 
how to offer easily adaptable mod- 
ules for new teachers to build 
their own creative coding curriculum. 
Angi wanted to create 
a “starter kit” to bootstrap teachers 
new to CS, which will likely be 
some combo of online resources, 
videos, lesson ideas, and “po- 
etic prompts.” She imagined three 
main areas of this kit: 
Learn — curated resources 
for teachers to learn/practice a 
CS concept themselves, 
Teach — compilation of 
new and existing resources (videos, 
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slides, lesson plans, activities) offer- 
ing different ways to teach a con- 
cept inthe classroom, 

Create — open-ended 
prompts for students to practice 
this concept while still allow- 
ing for their creative voices to 
shine through. 


FEL Cultivating Creative 

052 Connection with Scratch 
and p5.js, 2021, Shawn 
Patrick Higgins, Mentored 
by Saber Khan. 


Ananimated cartoon GIF of Shawn Higgins 
clicking his heels together and whistling plays in 
the center of his scratch bio page/website. He 
wears ared cap and has a large beard. He wears 
blue jeans, an orange sweater, and red shoes. 
There are four buttons on the page: About, Fun 
Facts, Likes, and FAQ. A large yellow "3-2-1 hi 
everybody!” animates above the small cartoon. 
The entire animation takes place within a grey 
scratch window. 
This project was all about harnessing 
Shawn Patrick Higgins’ students’ 
all-time favorite Scratch experiences 
and creating a curated project- 
based pathway for students to exper- 
ience the best of the best: first in 
Scratch, then by “upmixing” them in- 
to p5.js. Through video tutorials 
paralleling the recreation of classic 
Scratch projects like Natalie 
Rusk’s “Paint with Gobo” and Ipzy’s 
“Bio Page,” as well as Shawn's 
own popular motion graphics and 


sound board projects, students were 
introduced to Scratch and p5.js 
through step-by-step visual instruc- 
tion, with a focus on the familiar and 
functional reapplication of concepts. 
Shawn referenced 
the work of other Processing Founda- 
tion Teaching Fellows — including 
Michael O’Connell and Layla Quino- 
nes — onhowto best enhance 
the onboarding process for middle 
school students. 
By designing explicit cre- 
ative parallels, Shawn's goal 
was to inspire both 
Scratch stu- 
dents of moder- 
ate proficiency 
to take the jump 
into p5.js, 
as well as appeal 
to inexperi- 
enced coders 
who may be 
intimidated by 
syntax, to 
begin their journey into digital ma- 
king with a visual language like 
Scratch! 


FEL P5LIVE — Walkthrough, 

053 2021, Ted Davis, Mentored 
by Saber Khan. 

For two years I've been devel- 

oping P5LIVE, a p5.js coding environ- 

ment designed for VJ, live-coding, 

remote collaboration, and teaching. 

Initially designed for fullscreen 

algorave usage, COCODING (shared 

document editing) was added 

early on, opening the door for both 

local and remote jams. Initially 

afun feature, it’s become a crucial 

tool for teaching introductions 

to creative coding in these COVID- 

19 distant-learning times. Through- 

out the pandemic, it supported peer 
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SKETCHES 
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Screenshot demonstrating concept of 
COCODING within the P5LIVE environment. 
Code overlays 3D rendering of p5.js 
sketch, interface allows sharing options. 
collaborations, entire classroom 
gatherings, coded A/V perfor- 
mances, and audio-reactive remote 
meditation sessions. Extra feat- 
ures geared towards learning and 
performance include Auto- 
Complete of p5.js functions, Smooth- 
Compile for additive changes 
to the sketch output, and SyncData 
enabling sharing of local data 
(MIDI, sensors, etc). Over the next 
year, additional features to sup- 
port remotely teaching code, P5LIVE 
Classroom, will be developed 
through an FHNW Lehrfonds grant. 
While P5LIVE’s feat- 
ures are documented ina README 
of more than 2,000 words, they 
have yet to be captured as video walk- 
throughs with example usage. 
Through this Fellowship, all current 
and upcoming Classroom feat- 
ures were demonstrated and shared 
freely as a video tutorial series. 
Aimed for teachers, students, and 
performance artists, ideally 
exposure to this tool and features 
helped them throughout and be- 
yond remote creative coding times. 
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Learning to code is difficult and it takes time. Processing is 
dedicated to making learning to code more accessible. 

We feel everyone should have the opportunity to learn and 
have access to resources. Our software and learning 
materials have always been free to use and also free to ex- 
plore and modify. We aim for software literacy, meaning 
teaching people how to read and write software. Processing 
is unique in its approach to learning how to code within 

the visual arts and in our aim to teach coders more about the 
visual arts. Processing has reached not only artists and 
coders, but also designers, filmmakers, educators, music- 
ians, performers, and students of all kinds. 


Eclipse Replacement for Processing Development Environment 
(PDE) with Localization, 2011, Harshani Nawarathna. 

Dynamic Library and Tool Loading, 2011, Peter Kalauskas. 
Debugging Tool for the Processing Development Environment, 
2012, Martin Leopold Groedl. 

Sketch Assistant, 2012, Manindra Moharana, Mentored by 
Daniel Shiffman. 

Streamlining Bluetooth Connectivity in Processing for Android, 
2012, Joshua Albers. 

GUI Library for Processing, 2013, Martin Grodl, Mentored by 
Florian Jennet. 

PDE X, 2013, Manindra Moharana, Mentored by Daniel Shiffman. 
Serial Library for Processing, 2013, Gottfried Haider, Mentored 
by Casey Reas. 

Tweak Mode, 2013, Gal Sasson, Mentored by Daniel Shiffman. 
Android Mode for Processing 3.0, 2014, Imil Ziyaztdinov, 
Mentored by Andres Colubri. 

Contributions Manager: Reloaded, 2014, Joel Moniz, Mentored 
by Florian Jenett. 

Loom, 2014,Cora Johnson-Roberson, Mentored by 

R. Luke DuBois. 

New Video Library Using GStreamer 1.x , 2014, Roland Elek, 
Mentored by Levente Farkas and Andres Colubri. 

ofSketch, 2014, Brannon Dorsey, Mentored by Christopher Baker. 
p5.sound, 2014, Jason Sigal, Mentored by Evelyn Eastmond. 

p5 IDE, 2014, Sam Lavigne, Mentored by Lauren Lee McCarthy. 
PDE X for Processing 3.0, 2014, Manindra Moharana, Mentored 
by Daniel Shiffman. 

POculus, 2014, Pratik Sharma, Mentored by Elie Zananiri. 

Sound for Processing 3.0, 2014, Wilm Thoben, Mentored by 
Casey Reas. 

TweakMode for Processing 3.0, 2014, Gal Sasson, Mentored by 
Christopher Baker. 

p5.js Windows Port, 2015, Guy de Bree, Mentored by Sam Lavigne. 
New Kinect Libraries openKinect and KinectPV2, 2015, Thomas 
Sanchez Lengeling, Mentored by Elie Zananiri. 

Processing.py 3.0 Update, 2015, Luca Damasco, Mentored by 
Golan Levin. 

Web IDE for p5.js, 2015, Jason Sigal, Mentored by Daniel Shiffman. 
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Raspberry Piand armv/hf support, 2015, Gottfried Haider, 
Mentored by Ben Fry. 

p5.SVG and p5.PDF, 2015, Zeno Zeng, Mentored by Danne Woo. 
Internationalization of p5.js Website & Collection of Sketches for 
the p5.js Community Statement video, 2015, Maya Man, 
Mentored by Johanna Hedva. 

Contribution Manager UI upgrade, 2015, Akarshit Wal, Mentored 
by Scott Murray. 

RSyntaxTextArea Integration and the REPL Mode, 2015, 

Joel Moniz, Mentored by Manindra Moharana. 

pdbots, 2015, Sarah Groff-Palermo, Mentored by 

Shawn van Every. 


p5 WebGL Renderer, 2015, Karen Peng, Mentored by Kevin Siwoff. 


Video and Audio Streaming Library, 2015, Nick Confrey, 
Mentored by Daniel Shiffman. 

pdpy, 2017, Abhik Pal, Mentored by Manindra Mohrarna. 
Processing.R, An Experimental New Mode in Processing for 

R Language, 2017, Ce Gao, Mentored by Jeremy Douglass. 

VR Audioscape, 2017, Sara Di Bartolomeo, Mentored by Andres 
Colubri, Gottfried Haider. 

Image Processing Library for Colorblindness, 2017, Sarjak 
Thakkar, Mentored by Claire Kearney-Volpe. 

The New Processing for Android, 2017, Rupak Das, Mentored by 
Gottfried Haider. 

p5.Sound Developments, 2017, Jeevan Farias, Mentored by 
Jason Sigal. 

Friendly Error System, 2017, Alice Chung, Mentored by 

Luisa Pereira. 

p5.js 3D Rendering WebGL Mode, 2017, Kate Hollenbach and 
Stalgia Grigg, Mentored by Lauren Lee McCarthy, David Wicks, 
and Daniel Shiffman. 

P5,js Mappa Library, 2017, Cristobal Valenzuela, Mentored by 
Daniel Shiffman. 

p5.js Release Process Automation and Library Modularization, 
2017, Saksham Saxena, Mentored by Lauren Lee McCarthy. 
p5.js en Espafiol, 2017, Aarén Montoya-Moraga, Mentored by 
Lauren Lee McCarthy. 

p5.js Web Editor Improvement, 2017, Jen Kagan, Mentored by 
Cassie Tarakajian. 
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p5.js Classroom System, 2017, Zach Rispoli, Mentored by 
Cassie Tarakajian. 

p5 (Python): Cross Platform Support, Image Support, and More, 
2018, Abhik Pal, Mentored by Manindra Moharana. 

Android Debugger: Processing-Android, 2018, Manav Jain, 
Mentored by Andrés Colubri and Rupak Das. 

Implementing Missing WebGL Primitives in p5.js, 2018, Adil 
Rabbani, Mentored by Stalgia Grigg. 

Processing Sound 2.0, Kevin Stadler, Mentored by Casey Reas. 
AR Renderer: Processing-Android, 2018, Syam Sundar K, 
Mentored by Andrés Colubri and Jesus Duran. 

Processing for Pi Website and Tutorials, 2018, Maksim Surguy, 
Mentored by Gottfried Haider. 

Dynamic Learning, 2018, Jithin KS, Mentored by Saber Khan. 
Development Environment: Beginner/New User Experience 
Features, 2018, Jae Hyun, Mentored by Elie Zananiri. 
Beginner/New User Platform for Algorithmic Composition 
onp5.Sound, 2018, Chan Jun Shern, Mentored by 

Jason Sigal. 

Improvements to I/O Methods for p5.js, 2018, Tanvi Kumar, 
Mentored Alice M. Chung. 

GLSL Editor for Processing, 2018, Izza Tariq, Mentored 

Andrés Colubri. 

New JavaScript Console in p5.js Web Editor, 2018, Liang Tang, 
Mentored by Cassie Tarakajian. 

Improvements to WebGL Mode in p5.js, 2018, Aidan Nelson, 
Mentored by Kate Hollenbach. 

Updating hello.p5js.org, 2018, Elgin-Skye McLaren, Mentored 
by Evelyn Masso. 

APDE Beta Push, 2018, William Smith, Mentored by Sara Di 
Bartolomeo. 

Test Strategy for Maintaining and Updating Mobile Functionality 
of p5.js, 2018, Sithe Ncube, Mentored by Lee Tusman. 

Search Bar for Sketches in the p5.js Web Editor, 2019, Rachel 
Lim, Mentored by Cassie Tarakajian. 

Advancing p5.js’s WebGL Mode, 2019, Sanket Singh, Mentored 
by Adam Ferriss. 

Updating and Improving p5.Serial, 2019, Jiwon Shin, Mentored 
by Shawn Van Every. 
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Visualizing STEM Education with Dynamic Learning, 2019, 
Ashneel Das, Mentored by Nick Mcintyre. 

Math in Motion, 2019, Alexandra Cheng and Oskar Garcia, 
Mentored by Greg Benedis-Grab and Ellen Nickles. 

Code Slang, 2019, Jenna Xu, Mentored by Sharon De La Cruz. 
Completing p5.py API and Improving Documentation, 2019, 
Arihant Parsoya, Mentored by Sam Lavigne and Abhik Pal. 
Curating Community Creativity for p5.js 1.0, 2019, Ashley Kang, 
Mentored by Kate Hollenbach. 

Improving p5.js Unit Tests, 2019, Urvashi Verma, Mentored by 
Evelyn Masso. 

Maintenance of Android Mode: SDK Downloader/Updater, 
Emulator, Library Structure, 2019, Deeraj Esvar R, Mentored by 
Sarah Lensing and Cristian Mosquera. 

p5.touchgui, 2019, Carlos LO5 Garcia, Mentored by Yining Shi. 
Processing Language Server, 2019, Syam Sundar K, Mentored 
by Manindra Moharana. 

Stabilizing and Improving p5.xr During Alpha Release, 2019, 
Vedhant Agarwal, Mentored by Stalgia Grigg. 

Stabilizing Processing Video with GStreamer 1.x, 2019, Alex 
Stamm, Mentored by Andres Colubri. 

Using Audio Workley in the p5.Sound Library, 2019, Oren 
Shoham, Mentored by Jason Sigal. 

Improved Web Editor Mobile UI, 2020, Ghales Trilo, Mentored by 
Cassie Tarakajian. 

p5 for 50+ Teaching, 2020, Inhwa Yeom, Mentored by 

Qianqian Ye. 

P5 Web Editor Spanish Translation, 2020, Omar Verduga, 
Mentored by Andrew Nicolaou. 

Extending p5.js Friendly Error System, 2020, Akshay Padte, 
Mentored by Stalgia Grigg. 

p5.js Accessibility and Canvas Descriptions, 2020, Luis Morales- 
Navarro, Mentored by Kate Hollenbach. 

Improving p5.py, 2020, Ziyao (Mark) Zhang, Mentored by Arihant 
Parsoya and Abhik Palxz. 

Swift Processing Library Development, 2020, Juan Lee, 
Mentored by Jonathan Kaufman. 

Support for Kotlin Native, 2020, Aditya Rana, Mentored by Syam 
Sundar K. 
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Italian Translation and i18n Improvements, 2020, Yukie Nomiya, 
Mentored by Evelyn Masso. 

Increasing Organization and Scope of the p5.js Showcase, 2020, 
Connie Liu, Mentored by Joey Lee and Yining Shi. 

Use ES6 Import and Classes in p5.Sound Library, 2020, 
Divyanshu Raj, Mentored by Kyle James and Jason Sigal. 
Addon Library Development — p5-teach.js, 2021, Aditya 
Siddheshwar, Mentored by Nick Mcintyre and Jithin KS. 
Improving the pd.xr Library Through Artistic Examples, 2021, 
Anais Gonzalez, Mentored by Stalgia Grigg. 

Korean Translations and Website Improvements, 2021, Joseph 
Hong, Mentored by Jiwon Shin. 

p5.js 2021 Showcase: The Love Ethic, 2021, Katie Chan, 
Mentored by KT Duffy and Sam Vassor. 

Adding Alt Text, 2021, Katie Liu, Mentored by Rachel Lim. 

Add Examples and Fix Bugs in Swift Processing, 2021, Masood 
Kamandy, Mentored by Jon Kaufman. 

Activism Through Storytelling with Code, 2021, Niki Ito, 
Mentored by Elgin-Skye McLaren. 

Improve Test Coverage in p5.Sound Library, 2021, Sai Bhushan, 
Mentored by Guillermo Montecinos. 

Hindi Translation for p5.js Website, 2021, Sanjay Singh Rajpoot, 
Mentored by Aditya Rana. 

New Contributor Onboarding Project, 2021, Ashley Jane Lewis, 
Mentored by Sarah Ciston and Kenneth Lim. 

Friendly Error System Project, 2021, Alice Chung, Mentored by 
Aren Davey and Kate Hollenbach. 

code.org, 2013-2017. 

Kadenze, 2015. 

Learning to Teach, Teaching to Learn, 2016-2021. 

Learning to Teach Creative Technologies Remotely, January 
22-23, 2021, Hosted by Integrated Digital Media at NYU Tandon 
School of Engineering, Organized by De Angela L. Duff, Tega 
Brain, R. Luke DuBois, Reginé Gilbert, Kathleen M. McDermott, 
and Ashley Jane Lewis. 

Learning to Teach, Teaching to Learn, January 20, 2019, Hosted 
by UCLA Design Media Arts. 

Learning to Teach, Teaching to Learn, January 20, 2018, Hosted 
by NYU Integrated Digital Media, Brooklyn, Presented by Daniel 
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Shiffman, Naomi Clark, and Brad Garton. 

Learning to Teach, Teaching to Learn, Houston, December 15, 
2017, Hosted by Moody Center for the Arts, Rice University, 
Houston, Organized by Tega Brain, Taeyoon Choi, and Lauren Lee 
McCarthy in collaboration with UCLA Conditional Studio. 
Learning to Teach, Teaching to Learn, 2017, Hosted by Postlight, 
NYC, Presented by Lauren McCarthy (UCLA DMA), Kaho Abe 
(Eyebeam Art and Technology Center), Mimi Yin (NYU ITP), and 
Nick Montfort (MIT). 

Learning to Teach at ICP, November 30, 2016, Hosted by Interna- 
tional Center of Photography, NYC, Presented by Tega 


Brain, De Angela L. Duff, Aankit Patel, and “BBQ Dave” Sheinkopf. 


Learning to Teach, Teaching to Learn, January 9-10, 2016, 
Hosted by School for Poetic Computation, NYC, Presented by 
Katherine Bennett, Golan Levin, Zach Lieberman, Stacey 
Mulcahy, Allison Parrish, and Dan Shiffman. 

Creative Coding Fest, October 22, 2016, Hosted by New York 
City (NYU ITP). 

Creative Coding Fest, April 23, 2017, Hosted by New York City 
(NYU MAGNET). 

Creative Coding Fest, September 23, 2017, Hosted by Los 
Angeles (UCLA DMA). 

Creative Coding Fest, November 12, 2017, Hosted by New York 
City (NYU-ITP). 

Creative Coding Fest, May 5, 2018, Hosted by New York City 
(NYU MAGNET). 

Creative Coding Fest, October 13, 2018, Hosted by San 
Francisco (SF Friends School). 

Creative Coding Fest, November 10, 2018, Hosted by New York 
City (NYU ITP). 

Creative Coding Fest, June 8, 2019, Hosted by New York City 
(NYU MAGNET). 

Creative Coding Fest, October 19, 2019, Hosted by San 
Francisco (SF Friends School). 

Creative Coding Fest, October 27, 2019, Hosted by Los Angeles 
(Crossroads School). 

Creative Coding Fest, December 8, 2019, Hosted by New York 
City (NYU ITP). 

Creative Coding Fest, July 11, 2020, Virtually hosted. 
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Creative Coding Fest, January 24, 2021, Virtually hosted. 
Creative Coding Fest, August 22, 2021, Virtually hosted. 
NYC DOE Curriculum, 2017, Luisa Pereira, with Teaching 
Contributors Courtney Morgan and Jose Orea. 
createCanvas, October 15, 2019, Dan Shiffman. 
createCanvas, November 15, 2019, Dan Shiffman, Part 2. 


createCanvas, December 13, 2019, Sharon Lee De La Cruz, Part 1. 


createCanvas, January 16, 2020, Sharon Lee De La Cruz, Part 2. 
createCanvas, March 17, 2020, Aankit Patel, Part 1. 
createCanvas, April 17, 2020, Aankit Patel, Part 2. 
createCanvas, May 20, 2020, Kelly Lougheed, Part 1. 
createCanvas, July 3, 2020, Kelly Lougheed, Part 2. 
createCanvas, October 1, 2020, Lauren Lee McCarthy. 
createCanvas, October 30, 2020, Ari Melenciano. 
createCanvas, November 30, 2020, Sara Hendren. 
createCanvas, February 5, 2021, Art Simon. 
createCanvas, February 5, 2021, Melanie Hoff. 
createCanvas, June 1, 2021, Tega Brain and Golan Levin. 
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EDU 
001 


Eclipse Replacement For 
Processing Develop- 

ment Environment (PDE) 
with Localization, 2011, 
Harshani Nawarathna. 

The project idea suggested 

anew Processing Development Envi- 
ronment (PDE) based on Eclipse 

and Xtext to handle syntaxes. 


EDU 
002 


Dynamic Library and Tool 
Tool Loading, 

2011, Peter Kalauskas. 
The goal of this project was to 

ease the process of installing and 
updating contributions by add- 

ing alibrary and tool manager to the 
PDE. 


EDU 
003 


Debugging Tool for the 
Processing Development 
Environment, 2012, 
Martin Leopold Groedl. 


Debug MO éerrrocessin 


Ahand-drawn bugis centeredinacircle 
enclosed ina larger square. Each elementin the 
logois a different shade of grey. There is text 
directly below the square that reads “Debugging 
Mode for Processing.” 

The goal of the project was to devel- 
op aworking prototype of a tool 

for debugging Processing sketches. 


EDUCATION 


EDU 
004 


Sketch Assistant, 2012, 
Manindra Moharana, 
Mentored by Daniel Shiff- 
man. 

This project brings real-time check- 
ing and reporting of errors and 
warnings along with additional fea- 
tures to the PDE. 


EDU Streamlining Bluetooth 
005 Connectivity in Processing 
for Android, 2012, Josh- 
ua Albers. 
(Bh Fae: |Procesing = 


|| File Edit Sketch Tocls XQMede Help 


Flakes 5 


vlist¢Flake> flakes: 


Problem Te 
ved cannot beresolved toa toe 


i cannot be resolved to 2 varabie 


[The vaue ofthe lcs variable cut snot used 


The Processing text editor with set-up code. 
Some of the code is underlined inred 

to exemplify the real-time checking feature. 
Errors and warnings found in the code are 

also displayed in a console at the bottom of the 
text editor. 

| proposed developing a library that 
streamlines basic serial commu- 
nication over Bluetooth for Android 
soit’s as easy as the desktop 
Processing application or on an Ar- 
duino device. 


EDU GUI Library for Proces- 

006 sing, 2013, Martin Grodl, 
Mentored by Florian 
Jennet. 


The goal of this project was to create 
a functional prototype for a new 
Graphical User Interface Library for 
Processing. 


SLIDERS/H SLIDERS/V 


= (iil = tu 


SLLDERS/\ 


A 2x2 grid displays four different themes of the 
proposed GUI. Each theme has the same UI 
elements (sliders, toggles, buttons, labels) but 
varies in color. The top-left theme has grey 

hues, the top-right cyan, the bottom-left fuschia, 
and the bottom-right lime green. 


EDU PDEX, 2013, 
007 Manindra Moharana, 
Mentored by 


Daniel Shiffman. 


predice.nule(25); 
Pvector futurelocation = PYector .add(Location, predict); 
float distance = PYector.dist (filtUreLBeation ,circleLocation); 


‘if (distance > circleRadius) { 


Plector toCenter = PVector.sub(eireleLocation, location); 


if (desired 
PVector st 


FATL(255,0,0)3 
ellipse (futuretocation.x,futuretocation.y.4.4); 


Acropped view of code written in the Processing 
text editor. A pop-up box that renames the 
variable “futureLocation” to “FL” appears over 
the editor. 

PDE X, acontinuation of Manindra’s 
2012 GSOC work, is a Proces- 

sing mode that augments the devel- 
opment environment with 

new features such as code comple- 
tion, refactoring, real-time 

error checking, and debugging. 
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EDU Serial Library for Proces- 

008 sing, 2013, Gottfried 
Haider, Mentored by Casey 
Reas. 

Serial Library replaces Processing’s 

existing RXTX-based serial li- 

brary with one built on top of Java 

Simple Serial Connector. 


EDU Tweak Mode, 2013, 
009 Gal Sasson, Mentored by 
Daniel Shiffman. 


The Processing text editor is opened on the left 
and the respective sketch is displayed on 

the right. The sketch is of a red ellipse with a cyan 
stroke in the middle of a dark grey canvas. 
Example draw() code for an ellipse is written in 
the text editor, such as stroke() and fill(), 

with hard-coded numbers. A color picker ap- 
pears over the code, corresponding to 

the ellipse’s stroke() color. 

TweakMode is a Processing 

mode that allows “tweaking” of hard- 
coded numbers ina sketch’s 


code through a user interface. 


EDU —_ Android Mode for Proces- 

010 sing 3.0, 2014, Imil 
Ziyaztdinov, Mentored by 
Andres Colubri. 

The new Android mode in Process- 

ing 3.0 implements several 

pieces of functionality that were 

missing from earlier versions: 

Export Signed Package (with trans- 

parent handling of keystores), 

device selector, automatic SDK 

download/installation, and 

target SDK selector. 


EDU Contributions Manager: 
011 Reloaded, 2014, 
Joel Moniz, Mentored by 
Florian Jenett. 


The Mode Manager is opened over the Processing 


text editor with several contributions listed 


within it. One of the contributions, titled “PDE X by 


The Processing Foundation,” is highlighted. 


The “Remove” button next to the contribution title 


has been pressed, anda progress bar ofits 
removal is displayed above the button. 


This project added new features to 


the Contributions Manager, 

suchas the addition, removal, and 
update of Tools and Modes 

without a restart, a new “examples- 
package”-type contribution, 

and highlighting contributions. 


EDU Loom, 2014, Cora 

012 Johnson- 
Roberson, Mentored by 
R. Luke DuBois. 


a 


Awhite 10x10 grid with a thick multicolor stroke 
around each cell. Random portions of 
the stroke are either red, yellow, blue, or grey. 


PROCESSING COMMUNITY CATALOG 


Loom lets you create and manipulate 
patterns of timed events, which 
could be mapped to audiovisual out- 
put, transformed in various ways, 
and recorded to enable non-real-time 
synthesis and synchronized video. 


EDU New Video Library Us- 
013 ing GStreamer 1.x, 2014, 
Roland Elek, Men- 
tored by Levente Farkas 
and Andres Colubri. 
The aim of this project was to create 
a set of Java bindings for the 
GStreamer 1.x series, automatically 
generating everything where 
applicable, and then updating the 
video library in Processing to 
use these new bindings. 


EDU ofSketch, 2014, Brannon 
014 Dorsey, Mentored 
by Christopher Baker. 


The browser-based text editor for openFrame- 
works is opened, andits respective sketch 
window appears on top ofit. The sketch is of ellip- 
ses at varying sizes and yellow-orange 

hues randomly scattered throughout the canvas. 
ofSketch is a barebones browser- 
based IDE for openFrameworks tar- 
geted towards new users. 


EDU p5.sound, 2014, 
015 Jason Sigal, Mentored by 
Evelyn Eastmond. 
p5.sound brings the Processing 
approach to Web Audio, in- 
cluding functionality such as audio 
input, playback, manipulation, 
effects, recording, analysis, and 
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synthesis with syntax built off of 
Wilm Thoben’s Sound for Process- 
ing library. 


p5.js 


Reference 


Ascreenshot of the p5.sound library reference on 
the p5,js site. 


EDU pd IDE, 2014, Sam La- 
016 vigne, Mentored by Lauren 
Lee McCarthy. 


The p5 text editor. 


Aneasy-to-use desktop IDE for creat- 
ing p5.js projects. 


EDU PDE X for Processing 

017 3.0, 2014, Manindra Moh- 
arana, Mentored 

by Daniel Shiffman. 


Gravitationalattractionan 


The Processing text editor with some exam- 
ple draw() code. A pop-up box with a dropdown 
list of suggested properties and func- 

tions appears next to an unfinished line of code. 


EDUCATION 


This project brought PDE X toa sta- 
ble state and madeit the 
default editor for Processing 3.0. 


EDU POculus, 2014, Pratik 
018 Sharma, Men- 

tored by Elie Zananiri. 
POculus provides an Oc- 
ulus renderer for Processing. 


EDU Sound for Processing 
019 3.0, 2014, Wilm 
Thoben, Mentored by 
Casey Reas. 
New features, bug fixes, and cross- 
platform support were intro- 


~ duced to the Sound library for Pro- 


cessing. 


EDU TweakMode for Proces- 
020 sing 3.0, 2014, Gal Sasson, 
Mentored by Christo- 
pher Baker. 
Modifications and fixes were 
brought to TweakMode, a new exe- 
cution mode in Processing 
3.0 that allows changing sketch 
parameters in real time. 


EDU p5.js Windows Port, 

021 2015, Guy de Bree, Men- 
tored by Sam Lavigne. 

Editor 


The p3.js editor is currently in development, try out a beta version of it 
k and bugs. Support for Linux coming 


|] Ascreenshot from the p5.js site of the p5 Editor 


download options for Mac OS X and Windows. 


Developmen of a Windows port for 
the p5.js IDE and fixed bugs for 
said editor. 


EDU New Kinect Libraries open- 
022 Kinect and KinectPV2, 
2015, Thomas Sanchez 


Lengeling, Mentored by 
Elie Zananiri. 
The goal of the project was to expand 
and update the existing Kinect 
libraries; OpenKinect-for-Process- 
ing and KinectPV2. 


. 


fas 


Agrid of photos that demonstrates KinectPV2 
functionalities. 


EDU Processing.py 3.0 Up- 

023 date, 2015, Luca Damasco, 
Mentored by Golan Levin. 

Python Mode was revitalized and up- 

dated as users were now able to 

write Processing 3.0 sketches using 

Python syntax in the new editor. 


EDU Web IDE for p5.js, 2015, 
024 Jason Sigal, Mentored by 
Daniel Shiffman. 


Ascreenshot of the browser-based code editor 
for p5.js. 

A browser-based code editor was 
designed specifically for the 

p5.js community. 


EDU Raspberry Pi and armv/hf 
025 support, 2015, Gottfried 
Haider, Mentored by Ben Fry. 
Gottfried worked on making Pro- 
cessing play well with the Raspberry 
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playin the background of ourp5.js — taxTextArea and the complementary 
emu statement video. AutoComplete code completion 


Tillisdudig haabangee ee library to bring several new features 
to the table, such as code folding 
and documentation support and par- 
ameter tabbing during auto- 
completion. 


= eee 


Ascreenshot of the webpage Processing 

for Pi showing the article for “Tutorials for using 
Processing and Raspberry Pi.” 

Pi and similar ARM-powered 
micro-computers (to borrow a term 
used in the 1970s to describe igi 

various kits and designs built around screenshot of the p5,js homepage with 
affordable microprocessors, parts of text translated to Spanish. The 


top navigation reads “Descargar * Empezar* 
such as the Motorola 6800). Referencia * Bibiliotecas * Aprender* 


Contribuir” in hot pink. 


EDU pd.SVG and p5.PDF, 2015, = 
026 Zeno Zeng, EDU Contribution Manager Ascreenshot of the PDE after RSyntaxTextArea 


Mentored byDanneWoo. 028 Ul upgrade, 2015, Akarshit integration. 
| Wal, Mentored by Scott 
a ‘ Murray. EDU pobots, 2015, Sarah Groff- 
: The aim of the project was to 030 Palermo, Mentored 


change the UI of the Contribution by Shawn van Every. 
Manager and make it more 
Apd sketch of an ellipse with the browser's user-friendly. 

inspector open. The SVG path of the ellipse is cial 
highlighted in the DOM. 

The main goal of p5.SVG was 

to provide a SVG runtime for p5.js so 
that users could draw using p5’s 
powerful API in SVG, save things to an 
SVG file, and manipulate exist- 

ing SVG files without rasterization. 


A flow that demonstrates how p5bots connects a 
microcontroller and the browser. 


| p5bots combines a socket layer and 
asimplified API to enable users 
to interact with an Arduino (or other 


EDU Internationalization of p5.js 


Ascreenshot of the Contribution Manager 


027 Website & Collection of window showcasing the search and filter microprocessor) from within the 
Sketches for the p5.js Com- functionalities of the updated UI. browser. 
munity Statement Vid- 
eo, 2015, Maya Man, Men- EDU RSyntaxTextArea Integra- EDU p5 WebGL Renderer, 2015, 
toredbyJohannaHedva. 029 tion and the REPL 031 Karen Peng, Mentored 
Maya Man worked primarily on two Mode, 2015, Joel Moniz, by Kevin Siwoff. 
separate projects: 1) Rebuilt Mentored by Alightweight webGL renderer 
the p5,js site using Node.js, Assem- Manindra Moharana. for p5.j was implemented, enabling 
ble, Grunt, Handlebars, and The RSyntaxTextArea integra- users to create sketches under 
YAML to support internationalization tion aimed at replacing the JEditText- WebGL mode while all the syntaxes 
and 2) Curated sketches contrib- Area, which was currently at the remain consistent with p5 2D 


uted from people around the worldto heart of the PDE editor, with the RSyn- (default) mode. 
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An Image Processing Library was im- 
plemented to ease differentia- 

tion of colors for people with color- 
blindness. 


EDU —_ The New Processing for 
037 Android, 2017, Rupak Das, 


aa Mentored by Gottfried 
Ascreenshot of the p5.js homepage with a back- Haider. 
ground image made with the webGL renderer. 


The PDE after Processing.R is installed. 


EDU Video and Audio Stream- 

032 ing Library, 2015, Nick Con- EDU VR Audioscape, 2017, Sara 
frey, Mentored by Daniel 035 Di Bartolomeo, Men- 
Shiffman. tored by Andres Colubri, 

This project focused on stream- Gottfried Haider. 

ing media (i.e. video and audio) over 

the network and revamped 

Processing’s core video framework. 


The SDK Updater GUI displaying download 
progress. 


Rupak Das transitioned the Proces- 
sing for Android build process 

from using ANT scripts to Gradle, a 
newer build tool that was more 
compatible with the current Android 


EDU _ pd py, 2017, Abhik Pal, 
033 Mentored by Manindra Moh- 


rarna. SDK. 
The main motivation behind creating 
p5py was to leverage Python’s Ascreenshot of alandscapeinVRAudioscape. EDU p5.Sound Develop- 
readability and Processing’s empha- VR Audioscape is a virtual reality ap- 038 ments, 2017, Jeevan Farias, 
sis oncoding ina visual context plication made to demonstrate Mentored by Jason Sigal. 


tomake programming easier to teach. and document the possibilities of the 
= - new Processing Android Card- 
board Mode. 


EDU Image Processing Library 
036 for Colorblindness, Agraph plotting the gain and frequency ofa 
2017, Sarjak Thakkar, Men-  soundwave. 


toredbyClaireKearney- Jeevan Farias furthered develop- 
Ascreenshot of the web documentation for p5.py Volpe. ment of the p5.Sound library, 

version 0.6.0. - ae including new effects, presets, and 
modules for algorithmic comp- 
osition. 


EDU Processing.R, an 
034 Experimental New Mode 


in Processing for R EDU Friendly Error System, 
Language, 2017, Ce Gao, | 039 2017, Alice Chung, 
Mentored by Jeremy Mentored by Luisa Pereira. 
Douglass. Alice Chung expanded the p5. 

Processing.R allows users to f . ; js Friendly Debugger, which checks 

‘ Z - Aphoto of fruit processed with one of the 
write Processing sketches using correction algorithms, RGB Color Contrast function calls for correct para- 
the R language. Method. meter input, identifies common 
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Ascreenshot of the p5 editor demonstrating the 

Friendly Debugger in action. 

JavaScript and p5,js errors, and 

provides feedback ina friendly and 

inclusive way. EDU p5.js Release Process 

042 Automation and Library 
Modularization, 2017, 
Saksham Saxena, Men- 
tored by Lauren Lee 


° *| -~——.— 


EDU p5.js 3D Rendering 
040 WebGL Mode, 2017, Kate 
Hollenbach and Stalgia 
Grigg, Mentored by Lauren McCarthy. 
Lee McCarthy, David Saksham Saxena worked on 
Wicks, and Daniel Shiffman. improving infrastructural aspects 
os = and operations of the p5.js 
library, independent of the library 
API itself. 


EDU p5.js en Espafol, 

043 2017, Aarén Montoya- 
Moraga, Mentored 
by Lauren Lee McCarthy. 


Ascreenshot of acustom shader rendering the 5 Ss 
surfaces of a grid of cubes. The shader blends an Pp ‘J 


image and video using two different texture 
samplers in GLSL and tints the color according to 
mouseX and mouseY via custom uniforms. 

Kate Hollenbach and Stalgia Grigg 
worked together to overhaul 

the 3D rendering WebGL mode to 
remove bugs, improve perfor- 
mance, and extend functionality. 


the buttons EN and ES. 


EDU P5.js Mappa Library, 2017, Aarén Montoya-Moraga worked 
041 Cristébal Valenzuela, 
Mentored by Daniel Shiff- site and internationalization 
man. infrastructure in order to translate 
Cristobal Valenzuela built “Mappa,” —_p5.js and Processing refer- 
a set of p5,js tools that facilitate ence materials. 
the work between the <canvas> ele- 
ment and existing map libraries EDU 
and APIs. 044 


p5.js Web Editor Im- 
provement, 2017, Jen 
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Amap made with MapboxGL with p5 in WEBGL. 


p5.js website switches language when clicking on 


on the development of the p5.js web- 


Kagan, Mentored by 
Cassie Tarakajian. 


w= Jen Kagan worked on improving the 
= debugging and development 


experience in the p5 web editor by 
implementing autocomplete 
code suggestions, and improving 
the existing console. 


EDU p5.js Classroom Sys- 

045 tem, 2017, Zach Rispoli, 
Mentored by Cassie 
Tarakajian. 

Zach Rispoli worked on a free- 

to-use classrooms system for p5.js, 

creating a system for instructors 
that are using p5,js to teach classes. 


Test Classroom 


An early version of the classrooms system. 


« EDU —_p5(Python): Cross Plat- 


046 form Support, Image Sup- 
port, and More, 2018, 
Abhik Pal, Mentored by 
Manindra Moharana. 


An early version of the classrooms system. 


Abhik Pal continued the work ona nat- 
ive Python port of p5 from last 

year with the goal of fixing the cross- 
platform issues and further ex- 
tending the API coverage. 
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EDU Android Debugger: Pro- 
047 cessing-Android, 
2018, Manav Jain, Men- 
tored by Andrés 
Colubri and Rupak Das. 


Pulse 


BL Labatt 


Awindow shows code for “androidsketch.” 


A Debugger for the Android mode in 
the Processing Development 
Environment (PDE) was implemented. 


EDU Implementing Missing Web 
048 GL Primitives in p5,js, 
2018, Adil Rabbani, Men- 
tored by Stalgia Grigg. 
The project involved implementing 
missing WebGL primitives: 


arc, point, bezierVertex, curveVertex, 


quadraticVertex, and text in p5,js. 
WebGl 


Arc Point Curves 


Three rendered figures ona white background. 
The title says “WebGL.” On the left is a graphic of 
apizza labelled “Arc.” Inthe middle is asphere 
made of points labelled “Point.” On the rightis a 
daisy flower with orange petals, astem, anda 
leaf, labelled, “Curves.” 


EDU Processing Sound 2.0, 
049 Kevin Stadler, Men- 

tored by Casey Reas. 
Kevin Stadler successfully 
undertook a complete rewrite of 
Processing’s Sound library 
through a fully backwards-compati- 
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Awindow of Processing code for a program named 
“OscillatorSpectrum” is shown in the back- 
ground. In the foreground is the resulting program, 


= which shows a window with a green back- 


ground, the text “Pulse,” and at the bottom of the 
window, a sound graphis rendered in hot pink. 


ble re-implementation based ona 


' Java synthesis engine and beginner- 


friendly example sketches. 


EDU AR Renderer: Proces- 

050 sing-Android, 2018, Syam 
Sundar K, Mentored by 
Andrés Colubriand Jesus 
Duran. 


Animage divided into three vertical sections. On 
the left, a 3D sphere is rendered in a photograph. 
Inthe middle a grid and a 3D red cube is rendered 
in aphotograph. On the right, a 3D shape of 
spikes emerging from a rectangular cube is 
rendered in a photograph. 


An ARcore Renderer was created 
which focuses on creating Augment- 
ed Reality applications using 
Processing — Android, that will be 
able to render 3D objects onto 

the real world scene using Proces- 
sing code in real time. 


EDU Processing for Pi Web- 

051 site and Tutorials, 2018, 
Maksim Surguy, Men- 
tored by Gottfried Haider. 


seweg [he result of this project was a web- 


site and a set of highly detailed 
tutorials for working with Processing 
on Raspberry Pi single board 
computers. 


Processing forPi 


camera 


Introduction 


Ascreenshot of the webpage for Processing for 
Pi, showing the article for “Camera.” 


EDU Dynamic Learning, 2018, 
052 Jithin KS, Mentored 

by Saber Khan. 
The project involved develop- 
ment of a web app called Dynamic 
Learning, which is an online 
platform where STEM teachers and 
creative coders can collabo- 
rate to create lessons that include 
interactive visualizations cre- 


| ated in pdjjs. 


Dampeh Osillatons 


Most of the frame is filled with a black square that 
has handwriting in different colors onit. The 

text reads “Damped Oscillations” and shows 
mathematical equations and diagrams. On 

the left side of the image is a list of the number of 
slides. This image shows that we are on the 

first slide. On the right side of the image is amenu 
with buttons that include: “Draw, Add Simu- 
lation, Dashboard, Request for new sim, Reset 
everything, Undo, Save, Increase Canvas 

Size, Decrease Canvas size.” 


EDU Development Environment: 
053 Beginner/New User 
Experience Features, 2018, 
Jae Hyun, Mentored 
by Elie Zananiri. 
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Six screenshots of the frames in the new Getting 
Started Tool tour. Each frame shows an image 
with text about a specific feature in Processing 3. 
The first six, shown above, include: Welcome to 
Processing 3!, Your First Sketch, Resulting Ellipse 
(which shows the resulting program from the 
previous frame), Your Second Sketch, Animating 
the Ellipse, and Example Code and Animations. 
The project involved developing two 
contributed Tools for New/Begin- 
ner users: 1) the Getting Started Tool, 
which consists of several frames 
that give new users a short tour of the 
PDE and 2) the Reference Tool, 
which provides a built-in reference 
feature and eliminates the need 

for users to open up a browser to find 
a Processing Reference. 


EDU Beginner/New User Plat- 
054 form for Algorithmic 
Composition on p5.Sound, 
2018, Chan Jun Shern, 
Mentored by 
Jason Sigal. 


Ascreenshot of a browser window split into three 
parts, each with a different color and a few sim- 
ple graphics made oflines. The top part reads, “Al- 
gorithmic Music Composition”; the middle 

part reads, “Part 1: Algorithmic Composition”; the 
bottom part reads, “Part 2: Notes on Time.” 


Chan made p5.Sound a 
friendly platform for algorithmic 


music composition tasks by building 
up features, fixing bugs, adding 
documentation, and producing ex- 
amples of p5.js sketches re- 

lated to algorithmic composition. 


EDU Improvements to I/O 
055 Methods for p5.js, 2018, 
Tanvi Kumar, Mentored 
by Alice M. Chung. 


Anew example for createColorPicker(). 


Tanvi Kumar improved the I/O meth- 
ods of p5.js by resolving exist- 

ing issues in I/O and testing meth- 
ods and various file types on 
different browsers. 


EDU GLSL Editor for Processing, 
056 2018, Izza Tariq, Men- 
tored by Andrés Colubri. 


Ascreenshot of the Shdr editor, with code 

onthe left side of the window and the results on 
the right. 

Izza Tariq developed a code- 

based (GLSL) shader editing tool for 


the Processing Development 


Environment (PDE) that updates the 
PDE sketch display window in 

real time without having to compile 
the code repeatedly. 


EDU New JavaScript Console 
057 in p5.js Web Editor, 2018, 
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Liang Tang, Mentored by 
Cassie Tarakajian. 
Liang integrated anew console 
to p5.js web editor by improving the 
original console, implementing new 
features, and making the console 
interactive. 


Ap5.js sketch showing new console functions 
like console.log(), console.warn(), and console. 
debug(). 


EDU Improvements to 
058 WebGL Modein p5,js, 
2018, Aidan Nel- 
son, Mentored by Kate 
Hollenbach. 
Aidan Nelson implemented a num- 
ber of ease-of-use improve- 
ments to p5.js’s WebGL (3D) mode, 
which allowed a beginner coder 


to visualize and understand 3D space. 


Ananimated GIF shows a grid of boxes move up 
and downin 3D space as our view rotates around 
the scene. 


EDU Updating hello.p5js.org, 

059 2018, Elgin-Skye McLaren, 
Mentored by Evelyn 
Masso. 

Elgin-Skye McLaren created 

a new interactive hello.p5js video 
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devices, but was in need of improve- 
pod.js ments to keep it up to date 


Sanket Singh, Mentored 
by Adam Ferriss. 


with the desktop version of Proces- This project implemented new func- 


Download * Start * Reference 


Ubrarles *  Leam —* Community 


EDU 
061 


ser. At the top, in hot pink text, is amenu that 
reads, “p5.js: Download’ Start * Reference * Li- 
braries * Learn * Community. en|es | fr.” In the cen- 
teris a video of a person with a graphic of scat- 
tered lines in a band of color; the caption at the 
bottom of the video reads, “I made this with p§js.” 
trailer and website to welcome 


new users to the p5 community. 


EDU —_ APDE Beta Push, 2018, 

060 William Smith, Men- 
tored by Sara Di Barto- 
lomeo. 


EDU 
062 


Ascreenshot of two ADPE windows showing 
code. Both are identical except the left window 
has an overlay to highlight the target selec- 
tion button. The right window has no overlay but 


shows the target selection dropdown when Q 
the buttonis pressed. 

APDE (Android Processing 

Development Environment) is a fully 
functional IDE for creating EDU 


Processing sketches on Android 063 
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sing and to improve its acces- 
sibility to new users. 


Three children huddle around and point toa 
tablet which shows a p5.js sketch. 


This project provided more con- 
venience for organizing and retriev- 
ing sketches within an individual 
account through asearchbaranda__ latestrelease of p5.serialcontrolin the new grey 
collections tab. 


Search files... | clear EDU 


The search bar in an active state. 


tionalities for p5.js using WebGL 
to expand the current functionality 
related to lighting. 

Test Strategy for Maintain- 

ing and Updating Mo- 

bile Functionality of p5.js, 

2018, Sithe Ncube, 

Mentored by Lee Tusman. 


The main goal of the project was 
a to design atest strategy andexten- _TWoblack spheres in front of a black background. 
Ascreenshot that includes part of the p5.js brow- sively test and update the pojjs : 
mobile functionality so that compati- shining witha red light. 
bility issues can be tracked eas- 

ily with updates to the library and mo- EDU 
bile platforms. 064 


The scene contains a red light. The left sphere is 
shining with white light, whereas the right sphere is 


Updating and Improving 
p5.Serial, 2019, Jiwon 
Shin, Mentored by Shawn 
Van Every. 

Jiwon Shin updated and made im- 
provements to the functionality 

of the p5.serial library, a commonly 
used library to connect serial 
devices to p5.js sketches. 


Search Bar for Sketches in 
the p5.js Web Editor, 
2019, Rachel Lim, Men- 
tored by Cassie 
Tarakajian. 


Ascreenshot of the application window for the 


and yellow color scheme. 


Visualizing STEM Educa- 
065 tion with Dynamic Learning, 
2019, Ashneel Das, 
Mentored by Nick McIntyre. 
This project improved and extend- 
ed Dynamic Learning by focusing on 
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Advancing p5.js’s 
WebGL Mode, 2019, 


three major areas of extension: inter- 
face changes and responsive- ( 
ness, integration with other software, | | 
and classroom usability improve- : 
ments. 


meme a 


Ascreenshot of the Code Slang interface feat- 
uring a sketch made up of red lines in the 
middle. The buttons at the top read “mad,” “lit,” 
“chill,” “hella,” “dope,” and “fam.” 


computer rather than a rigid set of 
logical commands. 


Ascreenshot of a black work area with white text, 
includes a textbox, two questions, anda 
simulation about patterns of growth. 


EDU —— Mathin Motion, 2019, EDU 
066 Alexandra Cheng and Osk- 068 
ar Garcia, Mentored 


Completing p5.py API 

and Improving Documen- 
tation, 2019, Arihant 

by Greg Benedis-Grab and Parsoya, Mentored by Sam 
Ellen Nickles. Lavigne and Abhik Pal. 


Math in Motion (MiM) is amodern in- S 
terface for working with math on om = 


the web. : z 


Ascreenshot of the web documentation for p5.py 
version 0.6.0. 

The aim of this project was to 

make p5.py ready for public use by 
completing the APIs to make 

iton par with Processing and p5,js. 


“p5 MiM’ in large, hot pink text. 069 vity for p5.js 1.0, 2019, 
Ashley Kang, Mentored by 
EDU Code Slang, 2019, Jenna Kate Hollenbach. 


067 Xu, Mentored by SharonLee === 


DeLaCruz. p5.Js 
Jenna Xu helped develop a Java- 
Script library thatis flexible, 


SHOWCASE 
intuitive and human; whose syntax ca 
resembles natural language 
more than programming language; 
and that transforms program- Ascreenshot of the new Showcase page on 
ming into a fun conversation with the psjs.org. 
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EDU Curating Community Creati- 


Ashley Kang curated six projects 
from the online and offline p5.js 
community and created a place for 
them on p§js.org. 


EDU Improving p5.js Unit 
070 Tests, 2019, Urvashi Ver- 
ma, Mentored by 
Evelyn Masso. 
This project focused on improv- 
ing the p5.js unit tests, creating a 
more complete unit test cover- 
age, and implementing tutorials for 
new contributors. 


EDU Maintenance of Android 
071 Mode: SDK Downloader/ 
Updater, Emulator, Library 
Structure, 2019, Deeraj Es- 
var R, Mentored by 
Sarah Lensing and Cristian 
Mosquera. 
This project focused on implement- 
ing an up-to-date SDK and Emu- 
lator installer to improve its function- 
alities. 


EDU p5.touchgui, 2019, 

072 Carlos LO5 Garcia, Men- 
tored by Yining Shi. 

p5.touchgui makes it easy to add 

buttons, sliders, and other GUI 

(graphical user interface) objects to 

pd.js sketches, enabling users 

to focus on quickly iterating ideas 

with easily created GUI objects 

that work with both mouse and multi- 

touch input. 


Ascreenshot of the p5 Editor showing code on 
the left and the results on the right. 
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EDU Processing Language Ser- Library to v2.0, which is based on the 
073 ver, 2019, Syam Sundar GStreamer media framework. 


K,MentoredbyManindra_ 
Moharana. 
Processing Language Server focus- 
es on creating a Language Server 
Protocol implementation for Proces- 
sing Programming Language. 


Ascreenshot of a window playing a video of a bee 
onaleaf. 


EDU Using Audio Workley in the 
Ascreenshot of Processing code written in 076 p5.Sound Library, 2019, 
VScode with auto-completion. Oren Shoham, Mentored 
by Jason Sigal. 
EDU Stabilizing and Improving This project added AudioWorklet 
074 po.xr During Alpha Re- support to p5.Sound, allow- 
lease, 2019, Vedhant Agar- ing certain parts of the library to run 
wal, Mentored by more efficiently by moving cust- 
Stalgia Grigg. om audio processing to a separate 
audio thread. 


EDU Improved Web Editor 
077 Mobile UI, 2020, Ghales 
Trilo, Mentored 
by Cassie Tarakajian. 
Ghales Trilo worked on im- 
proving the experience of the web 
editor on phones and tablets 
by detecting, validating, studying, 
and providing solutions for 
weak points on the mobile and tab- 


Ayellow circle with a black stroke with the letters let experience. 


“X" and “R” within it. A teardrop is underneath 
EEE EGE GT il 
ioe 


the “R.” 
bles WebXR capabilities with 

as coll 
EDU Stabilizing Processing Vid- —=—====1_ mem 


po.xris a library for p5.js that ena- 
pd sketches. 
075 eo with GStreamer 


1.x, 2019, Alex Stamm, a 
Mentored by Andres p= 


The goal of this project was 
to stabilize the Processing Video 
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First design draft of the mobile layout. 


EDU po for 50+ Teaching, 2020, 
078 Inhwa Yeom, 
Mentored by Qiangqian Ye. 


| Inhwa Yeom reached out to 


educators around the world, who are 
aged 50 years old and up, with 
the aim to contribute to document- 


_ ing, showcasing, and sharing 


teaching experiences, specifically 
by re-using the existing features 
of pdjs.org. 


Forum-Leamhgfor 50+ p5for50+ workshop 


In-progress website with title “p5 for 50+ aims to 
enhance digital literacy and rights of people 
going on 50+.” 


EDU P5 Web Editor Spanish 
079 Translation, 2020, 
Omar Verduga, Mentored 
by Andrew Nicolaou. 
Omar Verduga improved and expand- 
ed the Spanish translation of the 
p5.js web editor and documentation. 


a 
©o- 


Ascreenshot of the different menu options 
inthe web editor, that are switching between 
English and Spanish. 


EDU Extending p5.js Friendly 

080 Error System, 2020, 
Akshay Padte, Mentored by 
Stalgia Grigg. 


Alog of error messages from the Friendly Error 
System. 
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Akshay Padte made p6.js’s Friendly +JuanLee worked to bring the camera EDU 


Error System even friendlier 
by adding new features and fixing 
existing issues. 


EDU pd.js Accessibility and 

081 Canvas Descriptions, 2020, 
Luis Morales-Navarro, 
Mentored by Kate Hollen- 
bach. 

Luis Morales-Navarro made p5.js 

more accessible by creating a 

describe() function that allows users 

to write their own text-based can- 

vas descriptions. 


EDU Improving p5.py, 2020, 
082 Ziyao (Mark) Zhang, Men- 
tored by Arihant 
Parsoya and Abhik Palxz. 
Ziyao (Mark) Zhang worked to 
improve p5.py, including standardiz- 
ing its API, and implementing 
some new features in 3D mode. 


ea = 


Ascreenshot of the web documentation for p5. 
pyversion 0.7.0- 0.7.1. 


EDU Swift Processing Library 

083 Development, 2020, 
Juan Lee, Mentored by 
Jonathan Kaufman. 


Arotating group of basic shapes ranging froma 
cube to a sphere, run on the 3D graphic module in 
Swift Processing. 


functionality and 3D primitives 
to the Swift Processing Library. 


EDU Support for Kotlin Native, 

084 2020, Aditya Rana, Men- 
tored by Syam Sundar K. 

Aditya Rana worked on the mi- 

gration of Android-Processing mode 

and Migrating Groovy based 

Gradle System to Kotlin, and imple- 

menting the multiplatform li- 

brary iniOS for as many stubbed 

methods as possible. 


Apanel that lists multiple folder structures. 


EDU Italian Translation and i18n 

085 Improvements, 2020, 
Yukie Nomiya, Mentored by 
Evelyn Masso. 


Increasing Organization 
086 and Scope of the p5,js 
Showcase, 2020, Connie 
Liu, Mentored by 

Joey Lee and Yining Shi. 


p5.js 


Programmed Plotter Drawings 


pd.js website with page titled “Programmed 
Plotter Drawings” and two images of plotter 
drawings in green and white. 

Connie Liu expanded the p5.js 
showcase to allow users to be able 
to easily search for inspiration. 
They could specify projects that use 
a specific library or function. The 
aim was to inspire users by the great 
diversity in p5.js’s community. 


EDU Use ES6 Import and 

087 Classes in p5.Sound Library, 
2020, Divyanshu Raj, 
Mentored by Kyle James 
and Jason Sigal. 

Divyanshu Raj worked with the pd. 

sound library to upgrade the 

codebase to use ES6 features and 


change the current module 


The p5.js-website-translator UI. 


Yukie Nomiya made the inter- 
nationalization process of the p5.js 
website easier and more ac- 
cessible to contributors, while also 
simplifying the maintenance of 

the translation. 
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format (current AMD) and loaders 
(requireJS) used in the mod- 
ule system. 


EDU Addon Library Devel- 

088 opment—p5.teach.js, 2021, 
Aditya Siddheshwar, 
Mentored by Nick McIntyre 
and Jithin KS. 

Aditya Siddheshwar worked on p5. 

teach.js, which involved develop- 

ing tools for teaching STEM through 

pd.js, adding functions to ani- 

mate shapes, and animating math 
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symbols. The library provides educa- 


tors tools to make interactive an- 
imated sketches that support learn- 
ing in the remote environment. 


EDU Improving the p5.xr 
089 Library Through Artistic 
Examples, 2021, 
Anais Gonzalez, Mentored 
by Stalgia Grigg. 
Anais Gonzalez created a series of 
interactive examples for the 
po.xr library that showed people how 
to work with creative coding 
concepts inside of a virtual space. 


EDU Korean Translations and 

090 Website Improvements, 
2021, Joseph Hong, Men- 
tored by Jiwon Shin. 

Joseph Hong worked on updating 

and adding to the Korean 

translations of the p5.js website. 

He also restructured naviga- 

tion within the site to improve the 

user experience of those new 

to p5jjs. 


EDU pd.js 2021 Showcase: The 

091 Love Ethic, 2021, Katie 
Chan, Mentored by KT Duf- 
fy and Sam Vassor. 

Katie Chan worked on the third 

iteration of the p5.js show- 

case this summer. Unlike previous 

years, this showcase had a 

theme: “The Love Ethic,” which 

was heavily inspired by au- 

thor bell hooks and her writing on 

embracing love in all aspects 

of our life. This showcase had a par- 

ticular focus on the softness 

of the programming language and 

the ability of p5.js to be a rad- 

ical community with values rooted 

in social justice and acces- 

sibility. 
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EDU Adding Alt Text, 2021, 
092 Ka tie Liu, Mentored 

by Rachel Lim. 
Katie Liu focused on adding 
alt text to visual elements on the pd. 
js website to increase the web- 
site’s accessibility for all users. The 
addition of alt text helped users 
who use screen readers to better un- 
derstand tutorials and examples 
onthe p5.js website. 


EDU = Add Examples and Fix Bugs 
093 in Swift Processing, 

2021, Masood Kamandy, 

Mentored by Jon 

Kaufman. 
Masood Kamandy continued 
developing the Swift Processing li- 
brary. His focus will be adding 
live-coding educational playgrounds 
to the library via Xcode Play- 
grounds and SwiftPlaygrounds for 
the iPad. He also helped with 
the iOS 15 version of the library and 
identified bugs/fixes during 
the development of the educational 
materials. 


EDU Activism Through 
094 Storytelling with Code, 
2021, Niki Ito, 
Mentored by Elgin- 
Skye McLaren. 
Niki Ito created a web-based guide 
for artists, designers, and co- 
ders to learn potential collaborations 
between art, community, and 
code. The guide followed her project, 
“Activism Through Storytelling 
with Code” as an example. The proj- 
ect was an interactive code- 
based website with visual narratives 
that illustrate conversations 
documented within the Asian com- 
munity. The website shed light 
ontheir experiences and created a 


stronger bond between individuals 
and cultures. 


EDU Improve Test Coverage 
095 in p5.Sound Library, 2021, 
Sai Bhushan, Men- 
tored by Guillermo Monte- 
cinos. 
Sai Bhushan improved the test 
coverage and the testing 
architecture of the p5.Sound 
library. 


EDU Hindi Translation for 

096 pd.js Website, 2021, San- 
jay Singh Rajpoot, 
Mentored by Aditya Rana. 

This project added a Hindi 

language translation and better 

language support added to 

its bucket. Sanjay Singh Rajpoot 

also improved the i18n en- 

gine for better translation across 

all languages. With proper 

implementation of the new function- 

ality, the site will be future- 

proof and stable for the up-coming 

versions of p5,js. 


EDU New Contributor On- 

097 boarding Project, 2021, 
Ashley Jane Lewis, 
Mentored by Sarah Ciston 
and Kenneth Lim. 

This project involved thinking about 

the experience for new contri- 

butors to the project with the guiding 

question: Wow can the README, 
developer_docs, and other documen- 
tation be improved to make it 

easier for new people to contribute, 

especially those without deep 

experience coding or contributing to 
open source? 


EDU Friendly Error System 
098 Project, 2021, Alice Chung, 
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Mentored by Aren Davey 
and Kate Hollenbach. 
This project involved improving the 
Friendly Error System (FES) doc- 
umentation by updating the FES dev- 
eloper doc, adding comments 
inline to the code, and implementing 
internationalization/localization 
to the FES so error messages may be 
given in different languages. 


EDU code.org, 
099 2013-2017. 


Hello Processing 


Ascreenshot of the Processing section onthe 
code.org website. The webpage reads 

“Hello Processing” with circles of different hues 
and opacities behind the text. 


Ascreenshot of a Processing tutorial on the 
code.org website. The screen is split into three 
tiles: the top-left tile is of apersonin glasses 
standing in front of a whiteboard, the bottom-left 
is acode editor displaying some Processing 
code, and the right screen is the visual output of 
the code. 


In partnership with code.org and 
their annual, global Hour of 

Code event, the Processing Foun- 
dation made one hour of code 
tutorials in online video form called 
Hello Processing. The tutorials 

are geared toward middle and high 
school students to learn Proces- 
sing. The tutorials are distinct in their 
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emphasis on creativity and visual art 
in programming, focusing on draw- 
ing, sketching, and visual interaction. 


EDU Kadenze, 
100 2015. 


foderwe 


Ascreenshot of the “Introduction to Program- 
ming for the Visual Arts with p5.js” section from 
the Kadenze website. There are two modules 
titled “Course Description” and “Course 
Instructors.” 


Awhiteboard full of ideas, questions, thoughts, 
and brainstorms. 


Teachers stand in front of green screen, their 
image mirrored on monitor nearby. 


The Processing Foundation part- 
nered with Kadenze to make a series 
of free, online classes around 
Processing and p5.js. Courses in- 
cluded “Introduction to Pro- 
gramming for the Visual Arts with 
p5.js,” taught by Lauren Lee 
McCarthy, Casey Reas, and Chand- 
ler McWilliams and “The Nature 

of Code,” taught by Daniel Shiffman. 


EDU Learning to Teach, 
101 Teaching to Learn, 
2016-2021. 


People sitting in a socratic circle in discussion. 


EDU 098-101 136 


Learning to Teach, Teaching to Learn 
is aseries of events for educa- 

tors who teach computer program- 
ming in creative and artistic 
contexts. Founded by the School for 
Poetic Computation in partner- 

ship with the Processing Foundation 
and directed by Tega Brain and 
Taeyoon Choi, the events bring toge- 
ther experienced educators to 
explore pedagogy, curriculum devel- 
opment, and how to create envi- 


ronments and tools for learning, spe- 


cifically for interdisciplinary art 
practices. 


EDU Learning to Teach Creative 
102 Technologies Remotely, 


January 22-23, 2021, Host- 


ed by Integrated Digi- 
tal Media at NYU Tandon 
School of Engineer- 


ing, Organized by De Ange- 


la L. Duff, Tega Brain, 
R. Luke DuBois, Reginé 
Gilbert, Kathleen M. 
McDermott, and Ashley 
Jane Lewis. 
Learning to Teach Creative Techno- 
logies Remotely: A Virtual 
UnSymposium was an opportunity to 
participate in conversations 


on how to foster creativity and experi- 


mentation within this new teach- 


ing and learning landscape. In an Un- 


Symposium format, we got to- 
gether and shared what worked and 
didn’t work in our remote and 

hybrid classrooms this past. We dis- 
cussed workshop opportunities 

and challenges for our pedagogy in 
the coming semester. 

Session topics included 
creative coding, physical compu- 
ting, and experimental realities (AR/ 
VR/XR or motion capture). Ques- 
tions concerning what’s worked and 
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what hasn't worked with Zoom in- 
struction came up ina session 
called “Beyond Zoom: Getting Weird 
with Teaching Online,” as well as 
questions about hosting virtual events 
and best practices for fostering stu- 
dent or colleague virtual engagement. 


EDU Learning to Teach, Teach- 
103 ing to Learn, January 

20, 2019, Hosted by UCLA 

Design Media Arts. 
Learning to Teachis a daylong con- 
ference for educators teaching 
computation in creative fields like 
art, design, or digital humanities 
departments. Led by Taeyoon Choi 
(SFPC) and Tega Brain (NYU), the 
the conference featured keynotes by 
leading educators including Elise 
Co (Art Center), Rnazes Spell (UCLA), 
and Lauren Gardner (SFPC). The 
speakers shared their experiences 
teaching computer program- 
ming, design, game, and related top- 
ics; their strategies for blending 
critical thinking and engineering; and 
inspiring creativity in a teaching en- 
vironment. This program also includ- 
ed a participatory session for at- 
tendees to observe the pedagogical 
strategies of their peers and deve- 
lop teaching approaches of their own. 


EDU Learning to Teach, Teaching 
104 to Learn, January 
20, 2018, Hosted by NYU 
Integrated Digital 
Media, Brooklyn, Pre- 
sented by Daniel Shiffman, 
Naomi Clark, and 
Brad Garton. 
The event consisted of a one- 
day program of speakers followed by 
a one-day open workshop for 
developing one’s own syllabus and 
course materials. 


EDU Learning to Teach, Teaching 
105 to Learn, Houston, Dec- 
ember 15, 2017, Hosted by 
Moody Center for the 
Arts, Rice University, Houst- 
on, Organized by Tega 
Brain, Taeyoon Choi, and 
Lauren Lee McCarthy 
in collaboration with UCLA 
Conditional Studio. 
The event consisted of a one day pro- 
gram of speakers followed by a 
one-day open workshop for develop- 
ing one’s own syllabus and course 
materials. 


EDU Learning to Teach, Teaching 
106 to Learn, 2017, Hosted 
by Postlight, NYC, Present- 
ed by Lauren McCar- 
thy (UCLA DMA), Kaho Abe 
(Eyebeam Art and 
Technology Center), Mimi 
Yin (NYUITP), 
and Nick Montfort (MIT). 
The second edition of the Learn- 
ing to Teach mini-conference was 
held on January 15, 2017 in New 
York City. Hosted by the School for 
Poetic Computation and in part- 
nership with the Processing Founda- 
tion, this daylong conference 
was an open forum for educators 
teaching computer program- 
ming in creative and artistic con- 
texts. The morning session 
consisted of aseries of talks by exper- 
ienced educators who shared 
their teaching philosophy, teaching 
strategies, and approaches to 
assessment and student feedback. 
In the afternoon, participants 
were invited to workshop sessions 
to discuss curriculum develop- 
ment, pedagogy, and tools for learn- 
ing. This conference explored 
the intersection of pedagogy and 
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creative practice, andprovidedan EDU Creative Coding Fest, EDU Creative Coding Fest, 
opportunity to share ideas for 109 Oct 22,2016,Hostedby 110 Apr 23, 2017, 

Hosted by New York City 
(NYU MAGNET). 


another year of teaching ahead. New York City (NYU ITP). 


EDU Learning to Teach at ICP, 
107 November 30, 
2016, Hosted by Interna- 
tional Center of Pho- 
tography, NYC, Presented 
by Tega Brain, De Ang- 
elaL. Duff, Aankit Patel, and 


t 
ee 


“BBQ Dave” Sheinkopf. Avaporwave-inspired flyer that's titled “NYU ITP 


The event consisted of a one-day pro- CC Fest” with smaller text underneath that reads 
“Creative Coding w/p5,js.” 


gram of speakers followed by a 
one-day open workshop for develop- 
ing one’s own syllabus and 

course materials. 


Aperson stands in front of aclass pointing ata 
projection of the p5 editor. 


EDU Learning to Teach, Teaching 
108 to Learn, January 
9-10, 2016, Hosted by i . 
School for Poetic Two speakers stand in front of a crowded 


Computation, NYC, Pre- classroom with their presentation projected onto “in 
er two screens. , 
sented by Katherine i Z Ateacher stands in front of two rows of students 


with a projection of the p5 editor. 


Keynote speakers and work- 

shop leaders included Dan Shiffman, 
Cassie Tarakajian, Sinan 

Ascioglu, Sofia Garcia, and more. 


Bennett, Golan Levin, Zach ; 
Lieberman, Stacey 
Mulcahy, Allison Parrish, 
and Dan Shiffman. 
This was a two-day conference for 
educators teaching computer 
programming in creative and artistic 
contexts. The event focused 


EDU Creative Coding Fest, Sep- 
111 tember 23, 2017, Host- 


onasking experienced educators: j ed by Los Angeles (UCLA 
How can we learn to teach more Vv ‘ DMA). 

effectively? It brought teachers toge- Two students sit at a roundtable with their laptops 

ther to explore pedagogy, curri- Open. 

culum development, and strategies Onarainy dayinNYC, forty students 

for creating environments and and teachers gathered together 


tools for learning. The event consist- at NYUITP to spend the day learning 
ed ofaone-day program ofspeak- howtousep5.js and thinking 

ers followed by a one-day open work- about how to use it in the classroom. 
shop for developing one’s ownsyl- | Keynote speakers and work- 

labus and course materials. It also in- shop leaders included Saber Khan, 
cluded a session on developing Dan Shiffman, Lauren Lee 
guidelines for teaching creative com- McCarthy, Danny Fenjves, Stephen 
putation and exploringhowtobest — Lewis, Sinan Ascioglu, Marius 


Lauren at the podium presenting in front of an 
| ; : audience. The presentation is projected onto a 
publish syllabus resources online. | Watz, and Katy Garnier. large screen. 
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Aperson sitting at the front of the roundtable with 
students in front of a presentation projected onto 
the wall behind them titled “Creative Live 
Communications.” 


Three individuals are looking at a screen froma 
distance, the screen being out of frame. One of 
the individuals is pointing in the screen's 
direction. 


Three tables filled with students sitting at their 
iMacs. The teacher stands at the podium to the 
left. 

=n EDU Creative Coding Fest, 

113 May 5, 2018, Hosted by 
New York City (NYU 
MAGNET). 

Keynote speakers and work- 

shop leaders included Jenn Schiffer, 

Ari Melenciano, Yining Shi, Crist- 


Three people sitting at a desk and looking at the . 
laptop in the middle. obal Valenzuela, Jeff Kaufman, Liam 


Baum, Zach Brewer, Matt Carl- 

berg, Tega Brain, Justin Gohde, Geor- 
gio Nicolas, Leandra Tejedor, 

Sinan Ascioglu, Danny Fenjves, and 


An aerial view of three young students at their 
laptops with the p5 editor opened. 


more. 


Two people in mid-conversation. There's a crowd 
behind them and the walls are exposed brick. 


Atable filled with students sitting at their iMacs. 


CC Fest made its way to Los 

Angeles with keynote speakers and 
workshop leaders including = 
Lauren Lee McCarthy, Dan Shiffman, 
Cassie Tarakajian, and more. 


| Agroup of people of different ages are sitting at 
individual desks with laptops. 


EDU Creative Coding Fest, 

112 November 12, 2017, Host- 
ed by New York City ; 

NYUITP Aperson stands in front of a crowded classroom 

( ). with a presentation projected on the wall behind 

Keynote speakers and work- them. The presentation slide has the Glitch logo 

shop leaders included Dan Shiffman onthe left with the text “Remix this p5.js starter 

c ie Tarakaii Jetf Ol ' project” underneath, and the p5.js logo on the Aperson with a laptop looking up at the projection 

assle larakajian, Je son, right with the text “p5js.org references & screen in aclassroom. There is a group of people 
Serena Parr, and more. examples” underneath. sitting behind her in desks. 
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Aperson crouching and reaching over to the Acrowded classroom of students sitting ata 
table with their individual laptops. There's a 
workshop leader standing in front of the class 
with their presentation projected behind them. 
The backgroundis alittle out of focus. 


keyboard on a laptop. A child looks on. 


Aperson standing and reaching over to the p 
keyboard ona laptop. Two children sitting lookon. * 


EDU Creative Coding Fest, 
114 October 13, 2018, 
Hosted by San Francisco 
(SF Friends School). Aperson on the podium speaking. Their presen- 
CC Fest made its debut in the Bay tation is projected onto the screen behind them. 
Area, as students and teach- 


Students of different ages sitting at tables with 


ers spent the day using p5.js, Proces- EDU Creative Coding Fest, individual laptops. 
sing, and Arduino. Keynote 115 November 10, 2018, Host- 

speakers and workshop leaders ed by New York City 

included Kelly Lougheed, (NYUITP). 


Xiaohan Zhang, Amy Wibowow, Lark 
Alder, and more. 


Tr a 3 F war 


Four children crowding around alaptop. An older 
individual is also looking over. 


Two people with laptops looking at their screens. EDU 


Creative Coding Fest, 
116 June 8, 2019, 
Agroup of forty people facing the camera and Hosted by New York City 
smiling. (NYU MAGNET). 


An older individual and a child looking at a laptop. 


Keynote speakers and work- 

shop leaders included Nicole He, 
Ingrid Burrington, Sofia Garcia, 

Jeff and Taylor from Upperline Code, 


St Lewis, Katy Garni Aperson standing in front of a classroom witha 
Aperson pointing at alarge screen displaying a tepegen Ewls, Katy arnier, code editor projected onto the screen behind 
presentation. Liam Baum, Colleen Lewis, and more. them. 
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Creative Coding Fest, Keynote speakers and workshop 
October 19, 2019, leaders included Jo Wright, 
Hosted bySanFrancisco —_ Evelyn Masso, J.D. DeVaughn- 
(SF Friends School). Brown, Kelly Lougheed, 

Kevin Workman, Paul Way, and 
= Scott Gruber. 


“wy EDU Creative Coding Fest, 

119 December 8, 2019, Hosted 
/ by New York City (NYU 
ITP). 
Five young students sitting around the table with Keynote speakers and workshop 
their laptops with an older individual. leaders included Aankit Patel, Chan- 
cey Fleet, Liam Baum, Kyle James, 
Jeff Olson, Esther Hersh, Luca Dam- 
asco, and more. 


Agroup of around 55 people facing the camera 
and smiling. 


_ 


| 


Aperson crouching between two people looking 
at alaptop. 
™ 


Agroup of about forty people sitting in rows of 
chairs and looking at the camera smiling. 


Keynote speakers and workshop 
leaders included Stevon Cook, 


Monica Dinculescu, Kevin Workman, Agroup of people of different ages sitting at 
tables with their individual laptops. They are all 


looking to the left. 


Chris Barrious, Saskia Leggett, 
Angi Chau, Greg Beutler, Art Simon, 


<_ 


Alaptop ona desk the webcam video is displayed Radamés Ajna, Suyash Joshi, 
onthe screen. A person with one hand up. and Rushali Paratey. 

Green dots and boxes mark different parts of the 

arm and hand. A photographer and their cam- 

eraarenextto the person with their armraised. EDU Creative Coding Fest, 


—— 118 October 27, 2019, Hosted 
by Los Angeles (Cross- 


roads School). 


Arow of people sitting with their laptops. The 
person in the foreground is smiling as they look to 
the front of the classroom. 


People sit at tables, each with their individual 
laptops, as they look at someone writing 
ona whiteboard. 


Keynote speakers and workshop Agroup of about thirty people looking at the 
leaders included Maya Man, Nabil camera smiling. Animage is projected onto the 


mM in, Celeste L. Li B screen behind them that displays “Crossroads 
\assein, eleste Layne, Liam baum, School for Arts & Sciences” andthe Processing  Apersonsitting ata desk with their presentation 
Tim Chen, and more. logo underneath. projected on the screen behind them. 
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™” show-and-tell, and breakout rooms 
_ were facilitated. Keynote speak- 
_ ers and workshop leaders included 
Ashley Jane Lewis, Chris Orban, 


uro. All donations from RSVPs 


Ayoung person sitting atadeskandlookinginto went to TRANSIT ARTS, a youth arts 
their laptop. 


development program. 


EDU Creative Coding Fest, 
121 January 24, 2021, Virtually 
hosted. 
<= #VirtualCCFest returned with twelve 
sessions on p5.js, Python, Hydra, 
Processing, ethics, Al, high school 
math, making games collabor- 
Three young individuals sitting at a desk with their atively, computational photography, 
laptops. An adultis crouching andreachingover and more. Keynote speakers 
to the keyboard of one of the laptops. and workshop leaders included 
Cassie Tarakajian, Jordan 

EDU Creative Coding Fest, July Harrod, Vivien Nguyen, Angi Chau, 
120 11, 2020, Virtually hosted. Liam Baum, Jeff Olson, Tristan 

oo . - Bunn, Flor de Fuego & Naoto Hieda, 
Nick McIntyre, Meghan Clark, 
Kofi Oduro, Katy Garnier, Joe Maz- 
_ zone, and Derrick McMillen. 


AZoom window screenshot of a person standing 
in front of a greenscreen projection of the 
p5 Editor. 


- Ascreenshot of a Zoom window in grid view 
» showing 36 tiles of attendees. 


_ 


A Zoom window screenshot of a person standing 
in front of a greenscreen projection of acolor 
scheme generator website. 

Due to the onset of COVID-19, CC 
Fest went virtual. Audiences 

from all over the world gathered 
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Alaptop displaying a Google Slides presentation 
within a Zoom window. The current slide in the 
presentation is titled “p5.js Community 
Statement.” 


~ online and spent the day engaging in 
a ; : 
~*y, creative coding. Workshops, 


Aren Davey, Liam Baum, and Kofi Od- 


Alaptop displaying a Google Slides presentation 
onthe left of the screen and fifteen Zoom tiles of 
individuals on the right. The slide in the 
presentation reads “A Celebration of Creative 
Coding for Teachers and Students.” 


EDU Creative Coding Fest, 
122 August 22, 2021, Virtually 
hosted. 


AZoom window displaying attendees and 
apresentation. The current slide reads 
“Linear Equations.” 


8Gs8 SBaegso 


AZoom window displaying a code editor. 
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Keynote speakers and workshop 
leaders included Miles Berry, 
Evelyn Masso, Dr. Emily Thomforde, 
Nick McIntyre, Tristan Bunn, Kofi 
Oduro, Ted Davis, Flor de Fuego & 
Naoto Hieda, Joe Mazzone, 

Angi Chau, and Derrick McMillen. 


EDU NYC DOE Curriculum, 
123 2017, Luisa Pereira, 

with Teaching Contribu- 

tors Courtney 

Morgan and Jose Orea. 
Developed by the NYCDOECS 
education team, the Introduction 
to Computational Media sylla- 
bus is a yearlong (108 hours) crea- 
tive computing course for high 
schools using the open source Java- 
Script library p5.js. By under- 
standing how code can be amedium 
for creative expression, students 
learn the fundamentals of computer 
science while designing and 
prototyping interactive projects that 
run ona browser. Additionally, 
students learn how HTML/CSS ele- 
ments can interact with p5.js 
to fully take advantage of develop- 
ing content for a browser. 
This course is currently being imple- 
mented in NYC public high 
schools via CS4All’s Software En- 
gineering Program (SEP), 
CS4AIlICM Cohorts, and it aligns 
with the CS4All Blueprint for 
CS education. 


EDU createCanvas, October 
124 15, 2019, Dan 

Shiffman. 
createCanvas kicks off with an 
in-depth, two-part interview with Dan 
Shiffman! Dan is the beloved 
host of The Coding Train, the vibrant 
YouTube channel of weekly cre- 
ative coding tutorials. Dan has been 
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part of the Processing Foundation 
since before it was a foundation. 


In this episode, he talks to Education 


Community Director Saber Khan 
about how and why he started mak- 
ing educational materials for 
creative coding, what open source 
contribution can look like (spoil- 

er: almost anything!), and takes us 
behind the scenes of his You- 

Tube channel. 


EDU createCanvas, November 
125 15, 2019, Dan Shiffman, 
Part 2. 
createCanvas returns with Part 
2 of our in-depth interview with Dan 
Shiffman! In Part 2 of the inter- 
view, he talks to Education Commu- 
nity Director Saber Khan about 
different sustainability models for 
open source, the pros and cons 
of using YouTube as a platform, and 
how The Coding Train is more 
about community and documenta- 
tion than it is about technical 
expertise. 


EDU createCanvas, December 
126 13, 2019, Sharon Lee De 
La Cruz, Part 1. 


New York City whose thought-provok- 
ing pieces address a range of 
issues related to tech, social justice, 
sexuality, and race. In Part 1 

of her interview with createCanvas, 
Sharon talks about joyful re- 
sistance and what decolonizing 
freedom might look like. She 
discusses her focus on restructur- 
ing the dynamics of the class- 

room, to ensure that POC and other 
marginalized students don't 

have to rely on luck to have access 
to education. 


EDU createCanvas, 
127 January 16, 2020, Sharon 
Lee De La Cruz, Part 2. 


ig Make: 5 


[| 
Getting Start 
| with ing. Star ed) 
i Adafruit FLORA 


Abox filled with thread and sensors. A book lies 
ontop of the box titled, “Getting Started with 


~ _ Adafruit FLORA." The subtitle in the bottom right 


Sharonis smiling and sitting on the floor in front 
of abright painting featuring three Black girls. 
Sharon Lee De La Cruzis a mul- 
tidisciplinary artist and activist from 


reads “Making Wearables with an Arduino-Com- 


= patible Electronics Platform Becky Stern and 


Tyler Cooper.” 


In Part 2 of the interview with create- 
Canvas, Sharon De La Cruz 

gets into the nitty gritty of what decol- 
onization looks like in the class- 
room. She discusses how educators 
with privilege can approach 


= working with marginalized communi- 


ties, and how folks from those 
communities themselves are impact- 
ed by systemic racism in pract- 

ice and ideology. 
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EDU createCanvas,March17, EDU 
128 2020, Aankit Patel, Part.1. 130 


createCanvas, May 20, 
2020, Kelly 
Lougheed, Part 1. 


Aankit sits at a large wooden desk between the 
American flag and New York State flag. 


Aankit Patel talks about his previous Kelly isin front of a rainbow pixel background. 
role as Senior Director of Com- Kelly Lougheed talks about 

puter Science Academics atthe NYC middle school and high school com- 
Department of Education, puter science education at all- 
andhowhe and his colleagueshave girls’ schools. 

found that creative, physical, 

and critical computing is anapproach EDU 
that jibes with both teachers 131 
and students. Aankit also shares 

ways that teachers can ap- — 
proach their work with a sense of 
community practice. 


\\\ 


createCanvas, July 3, 
2020, Kelly 
Lougheed, Part 2. 


ee 


EDU createCanvas, April 17, 
129 2020, Aankit Patel, Part 2 


Kelly stands in front of the classroom looking at 
the camera. There are about six students around 
her. 

Kelly Lougheed talks about creative 
applications of coding in the 
classroom and professional devel- 
opment and pedagogy for edu- 
cators teaching coding. 


Introducti outational Media 


Screenshot of a webinar that says “Introduction 
to Computational Media with p5.js.” The text is 
green, yellow, and pink on black. 


In Part 2 of his interview, Aankit Pa- © EDU createCanvas, 
tel speaks about the different scales 132 October 1, 2020, Lauren 
ofimpact that open-source soft- Lee McCarthy. 


ware can have on education, as well 
as how to engage teachers in 
creating not only curriculum but a 
sense of community and agen- 

cy for themselves. 
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In the first episode of Season 2 of 
createCanvas, Saber Khan 

talks with Lauren Lee McCarthy 
about p5.js, teaching, and 

being a student and a teacher. 


~ Lauren's face is warped, with 2.5 orbsin 


front of her. The orbs show interiors of people 
in their homes. 


EDU createCanvas, October 
133 30, 2020, Ari Melenciano. 


Ari smiles at the camera. She is standing outside 
in the sun ona basketball court. 


Ari Melenciano speaks about her 
experience teaching everything from 


= highschool AP computer science, 


kindergarten, and middle school to 


_ nowcomputer science at the 


undergraduate and graduate univer- 
sity levels. Growing up an artist, 

she explains her approach to art-mak- 
ing within a context of education 

and activism, as well as a way to move 
through life. She discusses Afro- 
tectopia’s origins, and what she has 
learned about community-build- 

ing and organizing over the years, as 
Afrotectopia has expanded to in- 
clude a festival, fellowship program, 
summer camp, and, in January 
2020, The School of Afrotectopia, a 
program that offered 10 free 
courses to over 250 students. 


EDU createCanvas, Novem- 

134 ber 30, 2020, Sara 
Hendren. 

Sara Hendrenis an artist, design 

researcher, and writer who teaches 
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design for disability. Sara discusses 
how to shift thinking and teach- 

ing around disability from assistive 
to adaptive design. 


Headshot of Sara with brown hair smiling. She 
wears a jacket with a collar turned up. 


EDU createCanvas, February 5, 
135 2021, Art Simon. 


, = 


Artis standing and leaning down to look at the 
electrical project in his hands. A seated student is 
also looking at it. 


In 2021, createCanvas turned 

into interview write-ups that contin- 
ue to be published on Proces- 

sing’s Medium. In this interview with 
educator Art Simon, Art reflects 

on his nearly 30-year journey in com- 
puter science education. Art 

speaks on his experience in teach- 
ing Processing and p5,js to his 


high school computer science class- 


es: “You can take relatively sim- 
ple structures in the [Java] language 
and create engaging programs.” 


EDU createCanvas, Feb- 
136 ruary 5,2021, Melanie Hoff. 
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Melanie Hoffis an artist and educa- 
tor whose work recodes conven- 
tions of norms, interfaces, and sex, 
through software installation and 
new choreographies of exchange. In 


_ this interview, they talk through 


the community spaces they've culti- 


_ vated, the workshops they've 


taught, and rethinking code as sys- 
tems of communication, love, 

and care. “It's being able to see the 
ways that our lives are altered 

by codes that other people have writ- 
ten. When you understand how 

other people wrote them, then you 
can start to write your own for 
yourself and for the people that you 
care about around you.” 


Arow of folks with laptops open. There is a group 
of three standing behind. 


EDU createCanvas, June 1, 
137 2021, Tega Brain 
and Golan Levin. 


ag 


—— j 
Code as Creative Medium 


Abook cover, which includes the title and author 
names in white type, against an illustration of 
whimsical shapes of many colors ona dark blue 
background. The bookis titled Code as Creative 
Medium. 


Artists and educators Tega Brain and 
Golan Levin sit down with Saber 
Khan to discuss their book, Code as 
a Creative Medium: A Handbook 

for Computational Art and Design. 
Tega reflects on creating a text- 
book for the educator: “The institu- 
tions we work for don’t provide 

that much support on how to teach 
these topics. We wanted to cre- 

ate something that would be useful, 
and [that] also speak to the fact 

that everybody has challenges, or 
similar stories, about what works 
and what doesn’t. What happens on 
your worst day — how do you deal 
with that?” 
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COLLABORATIONS (COL) 001-006 147 


Our mission is to promote software literacy within the visual 
arts, and visual literacy within technology-related fields — 
and to make these fields accessible to diverse communities. 
Our goal is to empower people of all interests and back- 
grounds to learn how to program and make creative work with 
code, especially those who might not otherwise have ac- 
cess to these tools and resources. The Processing Founda- 
tion was created in 2014 by Ben Fry, Casey Reas, and 

Daniel Shiffman. 


Choreographic Coding Lab, 2015, Led by Motion Bank in Part- 
nership with the Processing Foundation, Hosted by UCLA Design 
Media Arts and the UCLA Center for the Art of Performance. 
Biased Data: A Panel Discussion on Intersectionality and Internet 
Ethics, 2015, Organized by voidLab, Hosted by the Processing 
Foundation and UCLA Design Media Arts. 

Open Tech Lab, 2016, Organized by Emma Cunningham, 
Johanna Hedva, A.M. Darke, and the Feminist Center for Creative 
Work. 

Scope Lab, 2017, Led by Miriam Posner and Lauren Lee 
McCarthy, with student research assistants Stalgia Grigg, 
Christina Yglesias, and Hillary Cleary. 

Code, Decolonized, 2021, Taught by shawné michaelain holloway 
and Xin Xin, Mentored by A.M. Darke, Masood Kamandy-Milne, 
and Lauren Lee McCarthy. 

Logic School, 2021, Organized by Xiaowei R. Wang, Dorothy R. 
Santos, and Logic Magazine, in partnership with Omidyar 
Network. 


COL — Choreographic Coding Lab, COL Biased Data: APanelDis- COL OpenTechLab, 2016, 


001 2015, Led by Motion 002 cussion on Intersec- 003 Organized by Emma 
Bank in Partnership with tionality and Internet Eth- Cunningham, Johanna 
the Processing Foun- ics, 2015, Organized Hedva, A.M. Darke, 
dation, Hosted by UCLA De- by voidLab, Hosted by the and the Feminist Center for 
sign Media Arts and Processing Founda- Creative Work. 
the UCLA Center for the Art tion and UCLA Design Open Tech Lab was a night of fun 


of Performance. Media Arts. and informal events aimed to 

E Sy support communities of specific 
groups who have been histor- 
ically marginalized in the fields of 
tech, coding, art, and online 
activism. Panel speakers included 
A.M. Darke, Ann Hirsch, Patricia 
Realini, and Seren Sensei. 


an 


A person at the podium giving a presentation. 
The presentation slide consists of four portraits 
of people with Google Search autosuggestions 
covering their mouths. 


Aperson performing a dance in front of acrowd. 


The Choreographic Coding Lab (CCL) 
was a workshop of exchange and 
collaboration for digital media artists 
working with code, who also have 

an interest in choreography, dance, 
and movement. CCLs are an 
outcome of Motion Bank, a four-year Aperson at the podium presenting in front of a 


research project of the Forsythe crowd. Their presentation is projected on the Aphoto of five individuals dressed as cyberpunks 

Company focused on the creation of screen that reads, “Your Nostalgiais Killing Me!” projected onto a screen. 

digital dance scores with guest The Biased Data panel examined 

choreographers. how real-world biases andinequality COL  ScopeLab, 2017, Led by 
are replicated 004 Miriam Posner and 
and systematical- Lauren Lee McCarthy, with 
lyintegrated student research 
into “neutral” al- assistants Stalgia Grigg, 
gorithms and Christina Yglesias, 
databases. Panel- and Hillary Cleary. 


ists included Scope Lab was a workshop 

Safiya Noble, Mar- series hosted by UCLA Design Me- 

ika Cifor, and dia Arts that focused on explor- 

An Xiao Mina. Ca- ing code as a creative medium with 

sey Reas and which to understand and repre- 

JohannaHedva sent diverse perspectives. The stu- 

co-moderat- dies were framed by the ques- 

ed the panels. tions: “Whose perspectives are 
represented?”, “Who has 


Aprojection of someone standing in a pile of sand 
and waving a flag. A silhouette of an individual 
standing in front of the projection. access to the tools to learn and 
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express themselves?” and “How do 
we design tools and projects that 
are more inclusive?” Each workshop 
consisted of hands-on program- 
ming experiments, lecture and dis- 
cussion, and projects devel- 

oped collaboratively. Prototyping 
took many forms including pa- 

per prototypes, software sketches 
with p5.js, and performances 

with physical objects. 


Aperson sitting around a table with their laptop. 
The screen above them projects a slide of 
different weave patterns. 


« 3¢ x 
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‘ 
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Scope Lab zine designed by Hillary Cleary. A pile 
of Scope Lab zines splayed ona table. 


The Scope Lab zine is opened to a spread of 
abstract pink and blue shapes. The right page is 
in focus with text on a wavy path that reads, 


“We ask questions like.” Students sitting around a table with laptops. A 


screen at the front of the classroomis projecting 
aslide that reads “UNCERTAINTY.” 


b COL Code, Decolonized, 2017, 
Cz 005 Taught by shawné 
michaelain holloway and 
Xin Xin, Mentored 
by A.M. Darke, Masood 
Kamandy-Milne, 
and Lauren Lee McCarthy. 
Code, Decolonized is an initia- 
tive and aliving archive that research- 
The Scope Labzineis openedtoaspread.The  @S, experiments, and practices 
left page has text that reads, “Whose per- new ways of learning and teaching 
spectives are represented?” and the right page ‘ 
programming languages for the 


has text ona circular path that reads, 4 
“How do we design tools that are more inclusive?” web through perspectives that are 
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UNCERTAINTY 


traditionally overlooked and under- 
recognized in the technical 
classroom. This collective work 
started from a teaching prac- 
ticum course offered at Parsons 
Design & Technology at The 

New School, which investigates the 
ever-shifting roles of software 


~ and explores new forms of code ped- 


agogy through queer, Black, 
abolitionist, and intersectional fem- 
inist con- 
sciousness. 
Following 

bell hooks’s vision 
of “education 

as the practice of 
5 freedom,” this 
course equips fu- 
ture educa- 

tors with tools to 
reframe their 
understanding of 
traditional 
computer sci- 
ence edu- 


(a cation and craft 
\=2 socially 

S engaged course 
Ri materials. 


Parsons Design & Technology Spring 2021 


Code, 
Decolonized 


Join Code, Decolonized! A teaching practicum that 
inyestigates the ever-shifting roles of software and 
explore new forms of code pedagogy through queer, 
black, abolitionist, and intersectional feminist 
consciousness. 


every friday 12:10 - 2:50pm 
with shawné michaelain holloway && xin-xin 


Ayellow-green square with a title that reads 
“Code, Decolonized.” The text underneath reads, 
“Join Code, Decolonized! A teaching practicum 
that investigates the ever-shifting roles of 
software and explores new forms of pedagogy 
through queer, black, abolitionist, intersectional, 
and feminist consciousness. 
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Ithas a grass- 
roots theory 
of change and 
believes the 
people who make 
the tech in- 
dustry run—its 
workers— 
have the power 
to trans- 
formit. 
Ascreenshot of the webpage for the Code, 
Decolonized archive. White text on black 
background inloop shape. 
COL Logic School, 2021, 
006 Organized by Xiaowei R. 
Wang, Dorothy R. 
Santos, and Logic Mag- 
azine, In Partnership 
with Omidyar Network. 
The logo for Logic School. The letter Lis outlined 
in black andis overlayed on top of an abstract S 
comprised of two semicircles. The letters are 
encapsulated in a white circle. 
Logic School is an online, experimen- 
tal school for tech workers. Logic 
School’scurriculumreflects the grow- 
ing momentum around demand- 
ing change in the tech industry and 
draws from the worlds of activ- 
ism, design, and software engineer- 
ing. Designed in collaboration 
with the Processing Foundation, the 
program cultivates critical think- 
ing about technology and its impact. 
COLLABORATIONS COL 
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When Ben Fry and Casey Reas started working on Processing 
in spring 2001, it was a personal project that had grown 

out of their work with John Maeda’s Design By Number soft- 
ware. They wanted a new way of “sketching” code and 

a way to teach the fundamentals of coding to artists and des- 
igners. Ben released the first version in August of that year 
and the project has grown through bursts of energy since. Ov- 
er the years, hundreds of people have contributed to Pro- 
cessing with their code and kindness. The pages that follow 
document different moments in the history of Processing 

and feature extraordinary contributions by members of the 
Processing community. 
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PRO Whatis DBN? 
001 1999. 

Before Processing, there was Design By Numbers (DBN), a minimal and 

elegant coding system created by John Maeda. John invited Ben Fry and Casey 

REAS to work on DBN and their involvement inspired the first version of Pro- 

cessing in 2001. The following textis still served at https://dbn.media.mit.edu. 

Design By Numbers was cre- 
ated for visual designers and artists as an 
introduction to computational design. 
Itis the result of a continuing endeavor by 
Professor John Maeda to teach the 
“idea” of computation to designers and art- 
ists. It is his belief that the quality 
of media art and design can only improve 
FIG DBNeditor, white-to-black gradient next through establishing educational 
001-01 tosevenlines of code, paper penlinerepeat. infrastructure in arts and technology 
schools which create strong, cross-disciplinary individuals. 

DBN is both a programming environment and language. The environment pro- 
vides a unified space for writing and running programs and the language intro- 
duces the basic ideas of computer programming within the context of drawing. Visual 
elements such as dot, line, and field are combined with the computational ideas 
of variables and conditional statements to generate images. 

DBN is not a general purpose programming language like C or Java, but was 
designed to familiarize people with the basic concepts of computational media. Study- 
ing DBNis a first step to take-not a final step. Its advantages are: 

-Free to use and multiplatform. 

- Easy to understand syntax designed for beginners. 

«Immediately accessible on the web. 

There are three primary components to the Design By Numbers System: 

-Design By Numbers core software: This software contains the complete DBN 
environment and can be viewed from the web or downloaded to an indiv- 
idual’s computer. 

«Design By Numbers book published by MIT Press Takes readers step by step 
through the DBN language with explanations of examples. 

- Design By Numbers Courseware: 

A flexibly designed website generator built for educators who want to use 
DBN to teach computational design. 
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PRO Procedding, 
002 2001. 
The earliest version of www.proce5ding.net (the original URL for the Pro- 
cessing website) was captured by the Internet Archive on 30 November 2001. 
The homepage of the website featured the following short description. 
Proce55ing is an environment for programming images, movement, and interaction. It 
is asketchbook for developing ideas, a tool for creating prototypes, and a context 
for learning the fundamentals of computer programming. The PrOcess1ng environment 
is inits early stages and will continue to develop. 
Pr()ce55ing is written in Java and enables the creation of Java Applications and 
Applets within a carefully designed set of constraints. It uses a 2D/3D Java ren- 
dering API that is a cross between postscript-style imaging in 2D and 3D rendering 
with OpenGL. 
PrOcessing is created by Ben Fry and Casey Reas. For more information email 
Ben and Casey: ben[at]procedding.net, casey[at]proced5ing. net. 
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PRO Processing Defined, 
003 2003. 

The following text was published on the Processing website (www.procedbing. 

net) in 2003 as an early overview of the basics of the project. 

Introduction 
The Processing project introduces a new audience to computer programming and en- 
courages an audience of hybrid artist/designer/programmers. It integrates a pro- 
gramming language, development environment, and teaching methodology into a uni- 
fied structure for learning. Its goal is to introduce programming in the context of 
electronic art and to open electronic art concepts to a programming audience. Unlike 
other popular web programming environments such as Flash and Director, Proces- 
sing is an extension of Java and supports many of the existing Java structures, but with 
asimplified syntax. The application runs locally and exports programs to Java app- 
lets, which may be viewed over the internet. It is not a commercial production tool, but 
is built specifically for learning and prototyping. 

Concept 
Graphical user interfaces became mainstream nearly twenty years ago, but pro- 
gramming fundamentals are still primarily taught through the command line interface. 
Classes proceed from outputting text to the screen, to GUI, to computer graphics 
(if at all). It is possible to teach programming in a way that moves graphics and concepts 
of interaction closer to the surface. Making exercises created during learning view- 
able over the web supports the creation of a global educational community and provides 
motivation for learning. A “view source” method of programming enables the com- 
munity to learn from each other. 

The concept of Processing is to create a text programming language spe- 
cifically for making responsive images, rather than creating a visual programming lan- 
guage. The language enables sophisticated visual and responsive structures and 
has a balance between features and ease of use. Many computer graphics and interac- 
tion techniques can be discussed including vector/raster drawing, 2D/3D transfor- 
mations, image processing, color models, events, network communication, information 
visualization, etc. Processing shifts the focus of programming away from technical 
details like threading and double-buffering and places emphasis on communication. 

Programming Language/Environment 
Processing is a Java environment which translates programs written in its own syntax 
into Java code and then compiles to executable Java Applet 1.1 byte code. It in- 
cludes a custom 2D/3D engine inspired by PostScript and OpenGL. The software is 
free to use and the source code will be made public. It runs on Windows, Mac OS 
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X, Mac OS 9, and Linux and the software is currently in Alpha release. The Beta release 
is scheduled for Summer 2003. Processing Version 1.0 focuses on teaching basic 
concepts of interactive networked computer graphics. 

Processing provides three different modes of programming—each one more 
structurally complex than the previous. In the most basic mode, programs are 
single line commands for drawing primitive shapes to the screen. In the most complex 
mode, Java code may be written within the environment. The intermediate mode al- 
lows for the creation of dynamic software ina hybrid procedural/object-oriented struc- 
ture. It strives to achieve a balance between features and clarity, which encourages 
the experimentation process and reduces the learning curve. 

Skills learned through Processing enable people to learn languages suitable 
for different contexts including web authoring (ActionScript), networking and communi- 
cations (Java), microcontrollers (C), and computer graphics (OpenGL). 

Networked Learning 
The Processing website houses a set of extended examples and a complete refer- 
ence for the language. Hundreds of students, educators, and practitioners across five 
continents are involved in using the software. An active online discussion board is 
a platform for discussing individual programs and future software additions to the proj- 
ect. The software has been used at diverse universities and institutions in cities in- 
cluding: Boston, New York, San Francisco, London, Paris, Oslo, Basel, Brussels, Berlin, 
Bogota, Ivrea (Italy), Manila, and Tokyo. 
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PRO Processing Relase Notes #69, 
004 2004, BenFry. 
Each version of the Processing software comes with release notes written by 
Ben Fry. These early notes include insights into the goals of the original software 
side by side with detailed technical notes. 
PROCESSING DEVELOPMENT ENVIRONMENT 
(c) 2001-03 Ben Fry and Casey Reas Massachusetts Institute of Technology and In- 
teraction Design Institute Ivrea. 
RELEASE NOTES & DEVELOPER SOAPBOX 
herein follows lots of random notes about the alpha releases of processing. more up-to- 
date details can be found in “revisions.txt” which has notes about individual releases. 
‘revisions.txt’ contains more information about the specific updates and fixes in 
this release. 
you'll have to pardon the chatty detail in some spots, as this will also serve as a re- 
sponse to many of the ‘frequently asked questions’ that we have. 
GETTING STARTED 
double click the ‘Processing’ application, and select something from the examples 
menu: File -> Open -> Examples. hit the ‘run’ button (which looks like the play button on 
aver or tape deck). lather, rinse, repeat as necessary. 
THANKS TO... 
thanks to the many people who have been helping us out. it’s huge. i'll get a nice 
long list of y’all in here soon. 
REVISIONS & ROADMAPS 
at least until the final “1.0” version, we'll be using four digit numbers for the release. we 
are calling revision “0043” the first “alpha”, which for us means “first publicly con- 
sumable app that can be used by early adopters”. later revisions (like this one) will sim- 
ply be numbered. the numbered releases aren't heavily tested, so don’t be sur- 
prised if/when something breaks.. just report the problem and go back to the previous 
numbered release until there’s a fix. 
there will be a few more numbered releases leading up to a beta release. be- 
ta means that all the features are in, but not all the bugs are out. there are several known 
issues with the alpha release (thin lines, lack of alpha transparency, etc) that will need 
to be sorted out for beta. 
additional numbered releases will follow, leading up to 1.0, a version that 
we can actually proud of and that has a minimum number of bugs. hopefully this is not a 
*long* ways off, but... 
| FOUND A BUG! 
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a cultured software elite such as yourself should use the gentleman's term “issue.” 
first, be sure to check under the notes for your specific platform to 
make sure it isn’t a known issue or that there isn'ta simple fix. 
note! avoid the urge to just email us at processing@media.mit.edu, or 
sending mail to ben or casey directly. while you may prefer the privacy of an email, itis 
much quicker for you to ask the whole gang, who are super helpful. we also 
what we use to keep track of bugs, so we may just ask you to use the bboard anyway. 
ok where was i.. next, check the bboard to see if something related has 
been re ported, or if there is already a workaround. 
best method is to post to the bulletin board at: http://processing.org/ 
discourse/ we prefer for you to use the bboard for bugs, since: 
-we like to use the bboard as a way to track bugs and get feedback 
-casey and ben can’t always respond quickly to email 
-and there are several knowledgeable people on the bboard 
if you want to go straight to the bugs page, it’s: http://processing.org/discourse/ 
yabb/YaBB cgi?board=Proced5ing_software_bugs 
when reporting this “bug” please include information about 
1. the revision number (i.e. 0048) 
2. what operating system you're using, on what kind of hardware 
3..a copy of your code--the smallest possible piece of code that will produce the 
error you're having trouble with. 
4. details of the error, which may be the last few lines from the files stdout.txt or 
stderr.txt from the ‘lib’ folder. 
for stranger errors during compile time, you can also look inside the “build” 
folder inside “lib”, which is an intermediate (translated into java) version of your code. 
the more details you can post, the better, because it helps us figure out 
what’s going on. useful things when reporting: 
*we want the minimum amount of code that will still replicate the bug. the 
worst that can happen is we get a report that says “problem!” along with a three page 
program. sure, everyone likes a puzzle, but simpler code will be a faster response. 
‘occasionally we may need you to pack up a copy of your sketchbook or something 
similar so that we can try and replicate the weirdness on our own machine rest 
assured, we have no interest in messing with your fancy creations or stealing your 
ideas. the p5 team is a pair of straight-laced boys who hail from the midwestern 
u.s. who were brought up better than that. and as we often lack enough time to build 
our own projects, we have even less time to spend figuring out other peoples’ 
projects to rip them off. 
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GOODIES & SEMI-HIDDEN FEATURES 
- shift-click on the ‘run’ button to go straight to ‘present’ mode 
- for quick renaming, just click on the sketch title 
‘inside the ‘lib’ folder is a ‘pde. properties’ file, which contains a handful of set- 
tings for your app and how it’s set up. you can change the coloring of things, or even 
change your sketchbook location inside this file. a second file with a similar title 
but that includes “windows’ or “macosx” etc in the name is for tweaks specific to your 
platform. for instance, we use the macosx-specific properties file to set the font 
size a little differently than on windows. 
PLATFORMS 
the processing development environment runs best on: 
1. windows 2000/XP 
2.Mac OS X 
3. linux 
4.mac os 9 
5. windows 95/98/ME 
our priority for how well the beast runs looks like: 
1. windows & mac os x (tied for first) 
2.mac os 9 
3. windows 95/98/ME (because we must) 
4. linux 
windows is the superior platform for running java applications. it’s not because 
we like windows the best, (sorry to the zealots in all other corners of the machine 
space) but that’s just howitis. the vm for mac os x is really quite good (especially when 
compared to apple’s previous efforts), but it’s still a bit behind. we think os x will be 
a great bet for the future, and apple is putting all their feebleweight behind it, so hope- 
fully it will evolve somewhere. 
developing the version for mac os 9is a big headache, but we think lots of peo- 
ple still use the crusty operating system, so we're going to keep supporting it for 
the meantime. the guess is that a lot of schools are still using it in their labs, and since 
schools are a significant target for the environment, we gotta play along. inthe 
short term, however, development for mac os 9 has been suspended. 
windows 95/98/ME is a piece of crap, but since lots of people (are often 
forced to) use it, we'll try and support. early alpha versions seem to be having trouble 
with 95/98/ME, but it'll run better in the future. 
for the linux version, you guys can support yourselves. if you’re enough of a 
hacker weenie to get a linux box setup, you oughta know what’s going on. for lack of time, 


PROCESSING PRO 004 165 


we won't be testing extensively under linux, but would be really happy to hear about 
any bugs or issues you might run into. actually, we don’t get happy that you’re having is- 
sues, but if you're going to have issues, we're happy that you tell us about them, so 

we can fix them. 

MAC OS X 
the most current release has only been tested on Mac OS X 10.2.6. your mileage may 
vary if you’re running something else. actually, your mileage will vary no matter 
what, because who knows what this software is gonna do. you're playing with free, alpha 
software. get psyched! 

minimum requirements.. processing requires at least Mac OS X 10.1. if you’re 
running anything older than 10.2, you'll need “Java 1.3.1 Update 1”, the latter of 
whichis available as a free update from the “Software Update” control panel. it can also 
be downloaded from http://www.apple.com/downloads/macosx/apple/ or from: 
http://www.apple.com/downloads/macosx/apple/java131.html for what it’s worth, we 
don't test processing under mac os x 10.1 and we don’t recommend it at all. 

mouse wheel support only works if you're using java 1.4. the latest version of java 
will be available via the software update control panel. 

(actually this paragraph is only relevant if you want to try java 1.4, since we wound 
up using 1.3 as the default for release 58) if you're having random troubles (excep- 
tions being thrown, screen painting weirdness, general confusion) you might want to try 
running processing with java 1.3.1 instead of java 1.4. to do so, right-click or control- 
click the processing application and select “Show Package Contents”. go to Contents 
-> Resources -> and then open MRJApp.properties in a text editor. remove the # 
from this line: com.apple.mrj.application.JVMVersion=1.3.1 and add a # in front of this 
line: com.apple.mrj.application.J VMVersion=1.3+ 

serial port.. we use rxtx (version 2.1_6) to handle serial i/o, which is included with 
the processing release. unlike previous releases (anything before 5/7), it no longer 
requires separate installation. however, if this is the first time you're using rxtx, you'll 
need to run serial_setup.command (double-click it and follow the instructions) 
to make sure that things are properly set up (a few permissions need to be changed). if 
you're getting a “serial port is already in use by another application’ it’s possible 
that you haven't run this script. you may also need to reboot after running the script. on 
my machine, i installed the keyspan driver for my usb-serial converter, ran the script, 
and then rebooted in order for things to work. in the past, i’ve used a keyspan 28X dual 
port adapter, and the selection i use on the serial port menu reads “/dev/cu.USA- 
28X21P1.1.” you'll probably have something similar. don’t mind the frightening names. 
another note on serial port.. tom igoe was kind enough to note that you'll be in a world of 
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hurt if you disconnect your serial adapter while a sketch is running--it’ll prolly 
freeze the machine and require a forced reboot. (while this may seem nutty, you might 
run into it if your adapter is plugged into your usb keyboard, and you have the key- 
board plugged into a monitor/keyboard switcher). 

quitting presentation mode.. on other platforms, hitting the ‘escape’ key will 
quickly get you out of presentation mode. however, there seems to be some key event 
weirdness under osx. we hope to find a fix someday. 

MAC OS 9 
we have temporarily suspended development for mac os 9, because we don’t have 
time to fight with this dying os before beta. we hope to resume mac os 9 development be- 
fore releasing the final 1.0 version. 

for releases earlier than 57: 
java applications on classic mac os are in a bad state, as apple has decided (right- 
fully so) to abandon further development of their java runtime under OS 9. 

serial works fairly well with my keyspan usb/serial adapter. thank god for 
patrick beard and jdirect. 

versions: we only test under Mac OS 9.2.2, all others.. who knows? 

WINDOWS 
win2k and winxp are used as the primary development platforms, so the release 
will likely work best on either platform. 

win95/98/me seem to have some trouble, but we think it’s just with the 
.exe that we use, so that'll get fixed in the future. you can try using the ‘run.bat’ file in- 
stead, and see if that works better. 

the release is now split into ‘standard’ and ‘expert’ versions. the basic release 
includes a working java vm, and is all set up and ready to go. the advanced version 
is for people who already have java installed (and don’t want to deal with the 20MB down- 
load), and know what they’re doing enough that they can also install the serial port 
code by hand. instructions on installing the serial code are in the ‘serial’ folder inside 
the ‘expert’ release. 

out of memory? try adjusting the parameters in the file ‘run.bat’ and use that to 
run instead of Processing.exe. short instructions can be found inside that file. 

mouse issues: by default, windows seems to skip every other pixel on screen, 
causing weirdness for some drawing applications done with pd. if you're seeing 
this, you can fix it by going to the windows “mouse” control panel, the “pointer options” 
tab, and select “enhance pointer precision.” (this was actually tracked down by 
someone else in the p5 community, whose name i have misplaced. if it was you, please 
drop me aline so you can be properly cited. this kind of help is huge for us, since we're 
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such a small group!) 

video.. if you want to use video input on the pc, you'll have to have a device that’s 
compatible with quicktime, or use something like winvdig to make it work: http:// 
www.vdig.com/WinVDIG/index.html otherwise you'll get no video. 

“hs_err_pid10XX.txt” error.. this is something within the java vm that we 
can't fix. it’s not clear what the problem is, but it seems to have shown up with java 1.4. 

LINUX 
the processing application is just a shell script, you can use this as a guide to getting pd 
to run with your specific configuration, because who knows what sort of setup you 
have. this release was tested on a redhat 9 box, and sun’s jre 1.4.2 is included with the 
download. replacing (or making a symlink to) the contents of the ‘java’ folder will let 
you tie in a preferred jvm for your machine. 

jikes.. just as 58 was being released, we ran into a problem where jikes (the 
java compiler used by p5) couldn't be found by the application on linux. faced with the 
deadline, we decided to put up an error message saying it wasn’t found. you should 
make sure jikes version 1.18 (we strongly recommend this specific version!) is installed 
onyour machine and in your path. 

serial.. this release uses rxtx-2.1_6 (just like macosx). you may get error mes- 
sage spew to the console when starting the application saying “Permission de- 
nied” and “No permission to create lock file” and to read “INSTALL”. this is because you 
need to add yourself to either the uucp or lock group so that processing can write 
to /var/lock so it doesn’t get in a fight with other applications talking on the serial port. 
supposedly, adding yourself to one of these groups will work (didn’t for me, but 
i'm alittle clueless) or running processing as root will get rid of the errors (not a great 
solution). 

WHAT IS SKETCHBOOK? 
we think most “integrated development environments’ (microsoft visual studio, 
codewarrior, jbuilder) tend to be overkill for the type of audience we're targeting with 
Processing. for this reason, we've introduced the ‘sketchbook’ which is a more 
lightweight way to organize projects. as trained designers, we'd like the process of 
coding to be alot more like sketching. the sketchbook and the ‘history’ menu 
under ‘sketch’, are attempts in that direction. 

WHY JAVA? OR WHY SUCH A JAVA-ESQUE LANGUAGE? 
We didn’t set out to make the ultimate language for visual programming, we set out to 
make something that was: 
1. asketchbook for our own work, simplifying the majority of tasks that we undertake, 
2.a teaching environment for that kind of process, and 
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3. a point of transition to more complicated or difficult languages like full-blown 
Java or C++. (a gateway drug) 
At the intersection of these points is a tradeoff between speed and simplicity of 
use. i.e. if we didnt’ care about speed, python or other scripting languages would make 
far more sense. if we didn’t care about transition to more advanced languages, 
we'd get rid of the crummy c-style (well, algol, really) syntax. etc etc. 
Processing is not intended as the ultimate environment/language (in fact, 
the language is just Java, but with another graphics api and some simplifications), it’s 
just putting together several years of experience in building things, and trying to 
simplify the parts that should be easier. 
EXTERNAL FILES / FONTS / READING DATA FILES 
if you want to use external files, like images or text files or fonts, they should be placed 
ina folder called ‘data’ inside: sketchbook -> default -> SKETCH_NAME 
starting with version 44, there are several functions that make dealing with data 
in files much easier (loadFile, loadStrings, splitStrings, etc) so file i/o should be fun! 
WHY IS IT CALLED “PROCESSING”? 
at their core, computers are processing machines. they modify, move, and combine 
symbols at a low level to construct higher level representations. Processing allows peo- 
ple to control these actions and representations through writing their own programs. 
the project also focuses on the “process” of creation rather than end results. the 
design of the software supports and encourages sketching and the website 
presents fragments of projects and exposes the concepts behind finished software. 
“Proced5ing’” is the spelling we formerly used for the url (processing.net 
being unavailable) and while it’s a combination of numbers and letters but is simply pro- 
nounced “processing.” you also might see “p5” used as a shortened version of 
the name. 
PROCESSING IS FREE TO DOWNLOAD / FREETO USE 
we think it’s important to have Processing freely available, rather than selling it for a mil- 
lion dollars under some godawful yearly contract update scheme. to that end, we 
encourage people to distribute the word widely and refer them to the site: http://proces 
sing.org 
on most of our own projects, we usually list them as “Built with Processing’ or 
something similar, with a link back to the site. of course this isn’t a necessity, but 
it makes us happy when you do. 
SOURCE CODE/ OPEN SOURCE/ GPL BLAH BLAH 
we plan for this project to be “open source”, everyone’s favorite phrase that means that 
you'll be able to get your grubby little mitts all over our code (all the code that’s behind 
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the processing development environment and the graphics engine used in tandem 
with it). we can’t promise, since we're still working on getting the licensing taken care of 
with our employers, but we think this should likely happen soon. 

the export libraries (internally known as ‘bagel’) will probably be LGPL, which 
means they can be used as a library and included in your project without you hav- 
ing to open up your code (though we encourage people to share anyway). 

more information about the gnu public license can be found here: http:// 
www.gnu.org/copyleft/gpl.htm| 

processing also includes other open projects, namely the oro matcher, 
the kjc compiler, and the jedit syntax package. the oro tools are distributed under a bsd 
style license as part of the apache jakarta project, and the kjc compiler is part 
of the kopi suite of tools, which is released under the gpl. so in fact, if the final, publicly 
available version of processing still uses kjc, the code for processing will have to 
be released gpl. more about the oro tools is at: http://www.savarese.org/oro/ and the 
home for kopi/kjc is here: http://www.dms.at/kopi/ 

kjc is being phased out in favor of the jikes compiler from ibm: http://oss.soft- 
ware.iom.com/developerworks/opensource/jikes/ which is covered by the ibm 
public license. 

we're sorry that our source code isn’t available just yet, we’re cleaning and 
scrubbing it, it was a decision between getting the alpha out to people to try versus tak- 
ing a few more weeks to clean up the project and deal with the technology licens- 
ing departments at mit and ivrea. these things are far more difficult and time consum- 
ing than they would appear. 

our plan is to have the code available with the first “beta” release, which will be 
the first release that is publicly available and downloadable from the site. 
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PRO Processing vs. Lingo Comparison, 
005 2003. 

When Processing was new, we created comparison tables between Pro- 

cessing and other coding languages. We had comparisons for Java, Action- 

Script, Lingo, Python, and Design By Numbers on the website. These 

helped people to convert what they already knew about coding to Processing 

and to bring their knowledge of Processing to other environments. 

Lingo is the language written for Macromedia’s Director software. Director was the dom- 
inant environment for designers and artists making CD-ROM projects, but has de- 
clined in popularity during the web era due to the success of Flash. It is still one of the 
most commonly used environments and it has excellent libraries of code for ex- 

tending its functionality. 

Lingo is integrated into a visual environment with a theater metaphor using 
terms like “stage” and “cast” to describe different elements of the software. The Lingo 
language is characterized by its verbose English-like syntax. It has been modified 
in recent years to support object oriented structures and 3D graphics. 

Online here: 
https://web.archive.org/web/20030605073321/http://proce55ing.net/reference/ 
compare/lingo.htm| 
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PRO Early Processing Support, 
006 2001-2012. 
Prior to incorporating as a foundation, Processing received key funding 
and support from several organizations and companies. These commitments 
enabled a series of pivotal improvements to the software. 
The Interactive Telecommunica- 
tions Program (ITP) at New York 
University sponsored a Processing 2.0 
sl development workshop in the sum- 
eis mer of 2011. 
Y. The Armstrong Institute for 
Interactive Media Studies at Miami Univer- 
ee sity funded the Oxford Project, a ser- 
FIG From left to right, Casey REAS, BenFry,Dan jes of Processing development workshops 


006-01 Shiffman at abed and breakfast in India- during the 2008-2009 academic year. 
na while working on Processing 1.0 in nearby : , , 
Oxford, Ohio. These four-day meetings in Oxford, Ohio, 


Three people sit at a table with flowers and 3D enabled the November 2008 launch 
words “faith,” “love,” and “believe” in front of them. of Processing 1.0 and stimulated future 
development. 

Oblong Industries funded Ben Fry 
to develop Processing during the sum- 
mer of 2008. This funding also assisted in 
the completion of the 1.0 release. The 
Rockefeller Foundation awarded Ben Fry 
with a Media Arts Fellowship in 2006. 

The grant marked the first time that Ben 
was able to work on Processing as a 
funded project. This support led to further 


FIG Notes while working on Processing 2.0 at 
006-02 NYUin 2011. 
Marker on whiteboard, many arrows, words © developments of the OpenGL and PDF 


shape, ellipse, curves. rendering engines, as well as significant 
enhancements to other libraries and their integration. 

The Interaction Design Institute lvrea funded four individuals’ work on Pro- 
cessing in the summer of 2003. This resulted in Dan Mosedale’s preprocessor using 
Antlr, Sami Arola’s contributions to the graphics engine, and other contributions 
to the Processing Development Environment and 2D graphics engine. We are grate- 
ful to Interaction Ivrea director Gillian Crampton Smith for her encouragement 
and support. 


PROCESSING COMMUNITY CATALOG PRO 006 172 


PRO Processing 3.0 in Denver, 
007 2014, Chris Coleman. 


While it presents as a simple and easy-to- 

use-tool, development of Processing 

is acomplex combination of code writing, 

documentation updates, multi- 

platform builds, and web deployments. As 

with any open-source project, coor- 

_ dinating all of these elements for a major 

release across multiple time zones 

and work schedules is an arduous task. This 

is why emphasis remains on bringing 

people together in person when shared 

_. timelines, singular focus, and quick 

communication enables leaps forward for 

a project. In late 2014, five members 

of the Processing development team gath- 

ered in Denver, Colorado to do just this. 

| |n planning the release of Processing ver- 

FIG Fromtoptobottom, DanShiffman,Manindra Sin 3, | offered to host Processing at 

007-01 Moharana, Ben Fry, and Andres Colubri. the facilities of the Emergent Digital Prac- 
Four men sit on stairs with laptops. tices (EDP) Program wherel ama 

professor. We at EDP gathered funds from the Program to support the open source tools 

we use in our classrooms, specifically Processing, Processing for Android, and 

p5.js. This enabled Andres Colubri, Ben Fry, Manindra Moharana, Casey Reas, and Dan 

Shiffman to fly to Denver and devote five days to the release of v3. The team gathered 

in our small graduate seminar classroom, scrawled notes across multiple whiteboards, 

and worked morning to night. They took brief breaks for coffee and meals provided 

onsite from local Denver restaurants and organized by Professor Laleh Mehran and me. 

Dan Shiffman and Casey Reas also gave brief presentations and answered ques- 

tions from EDP students about Processing and creative coding. While not all the people 

who worked on the release could be there in person, it was a testament to what 

can get done on open-source projects when we connect IRL. This was also the first maj- 

or effort at the University of Denver to support open-source tools for the arts and 

inspired me to keep going, creating the Clinic for Open Source Arts in 2018. 
Documentation from the Processing 3.0 development meeting sponsored 

by the Emergent Digital Practices program at the University of Denver, November 2014. 
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PRO Processing 3.0 Release, 
008 2015. 

The Processing 3.0 launch in 2015 was a huge effort by an extended core 

team. The text printed here includes an email prepared for the launch, incom- 

plete presentation notes on Casey’s computer, and the ever-important list 

of “changes” to the new release. 

We're thrilled to invite you to try Proces- 
sing 3. As always, it’s free and open source 
and it’s available here: https://proces 
sing.org/download/. 

Processing 3 has anewcode 
editor with an enhanced interface, better er- 
ror checking, and a built-in debugger. 

Dan made a video to explain the debugger: 

https://vimeo.com/140134398. Pro- 

cessing 3 is faster for OpenGL (P2D and 

P3D) work and we've added new feat- 

ures for high-resolution screens and full- 

FIG Processing screen display. We also have anew 

008-01 logo. and easier way to install and update Pro- 
a = cessing Libraries, Modes, and Tools. 

The Processing 3 software was dev- 
eloped by the non-profit Processing 
Foundation. We started the Foundation 
<http://foundation.processing.org/> 
in 2012 with the two-fold mission to pro- 
mote software literacy within the visual 
arts, and visual literacy within technology- 
| related fields. Our primary goalis to 
empower people to learn how to program. 
: Individual contributions from 
FIG Processing editor with the community, Google’s Summer of Code, 
008-02 libraries menu open. and Fathom Information Design are 
our greatest sources of support. We thank O’Reilly Media, the Interactive Tele- 
communications Program at New York University, and the Emergent Digital Practices 
program at the University of Denver for additional support. If you can support our 
work, please get in touch at foundation@processing.org. 
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Yours, Ben, Casey, Dan, Andrés, Scott, Elie, Florian, Jakub, and James 


I 
Casey Notes 
1. Hello and welcome, my nameis.... 
2. What's newin Processing 3? 
3. A brand new editor! 
1. newinterface and look 
2. live error-checking, multiple error messages, better error messages 
3, auto-completion 
4. OpenGL renderers rebuilt for speed and efficiency, no more Applet! 
1. fullScreen() with screens and SPAN 
2. I'd figure out a demo or two that shows off how speedy and flicker-free 
things are here... Andrés might have an idea for a few, i.e. a full-screen 
shader example and some others [fry] 
5. Support for high density displays 
1. pixelDensity() 
2. JFX for retina and 2D work (experimental!) 
6. size() has to use hard coded numbers, you can use settings() otherwise 
1. too technical? | hope people *never* have to use settings(), and am 
alittle confused by the amount of confusion around this [fry] 
7.new contributions manager—how to get libraries, video, sound as examples? 
1. combine libraries, tools, examples, modes 
8. sketchbook migration, 2.0 and 3.0 sketchbooks 
9. to do 
1. libraries not ported for 3.0, we've reached out and are hopeful 
2. this can also be a call for library/tool/mode authors-—if they have 
questions they should get in touch b/c we want to support them [fry] 
3. mention example packages and get another plug in for shiffman 
books! [fry] 
I 


Changes in Processing 3.0 

This page lists the most important changes between Processing 3 for people who are 
familiar with Processing 2. For more specific details, read the revisions.txt (https 
://github.com/processing/processing/blob/master/build/shared/revisions.txt) file to 
see what's changed since the release before it. This is where you go if your code 
stops working in the most recent release, or if you want to know if your favorite bug has 
been fixed. 
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The Big Stuff 

Rendering rebuilt - OpenGL (P2D and P3D) is now stutter-free and very 
speedy. Some JAVA2D performance improvements as well. The new FX2D 
renderer offers huge speedups for 2D drawing, especially with high density 
“retina” displays. 

New editor — The main editor window now includes: 

Autocomplete! (can be activated in Preferences) 

A full-featured, easy to use debugger 

Tweak Mode (http://galsasson.com/tweakmode/) has been incorporated 
New interface — It’s not yet finished (https://github.com/processing/process- 
ing/issues/3072) but the Ul is undergoing a major makeover. 

High-res display support — New methods pixelDensity() anddisplayDen- 
sity() make it easier to create sketches that will run nicely on high-res (“Retina”) 
displays. It sounds so simple when put like that, but this is a really big deal. 
Unified Contributions Manager — We used to have separate windows for install- 

ing Libraries, Modes, and Tools. Now a single “Contributions Manager” helps you 
manage installation and updates for all of these contributions by third-party authors, 
plus... Examples! 
Sketchbook Migration — If you already have a (2.x) sketchbook, 3.0 will ask if you 
want to create a new, 3.0-specific sketchbook, or share the existing one. 
Things That May Break Your 2.x Sketches 
Do not use variables in size() — This time we really mean it. We've been saying that size() 
must be the first line in setup since at least 2004, and that using variables instead 
of numbers will cause problems since 2006, and by at least 2009, simply “don’t do it,” 
but now the chickens have come home to roost. In the past, the size() function was 
implemented by doing backflips behind the scenes. Those backflips made things very 
fragile, introduced cross-platform quirks that have consumed too many of my week- 
ends, and prevented us from making wholesale performance improvements to the ren- 
dering system (higher performance, better full screen support, etc). But despair 
not! If you must change the size of your sketch, use surface.setSize(w, h), which is the 
one and only (safe) way to alter your sketch’s size. A short demo that’s both resiz- 
able and gives you a random sketch window size whenever you hit a key: 
void setup() { 
size(400, 400); 
surface.set 
Resizable(true) ; 


} 
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void draw() { 
background (255) ; 
line(100, 
100 ,width-100, 
height-100) ; 

} 


void keyPressed() { 
surface.setSize 
(round (random 
(200,500)), 
round(random(200, 500))); 


} 

Applet is gone — Java’s java.awt.Applet is no longer the base class used byPApplet, so 
any sketches that make use of Applet-specific methods (or assume that a PApplet is a 
Java AWT Component object) will need to be rewritten. 

You only smooth once — smooth() and noSmooth() can only be used insetup(), 
and only once per sketch. Note that smooth() has enabled by default since 2.x, so it’s 
unlikely you'll need it anyway. 

For the curious or insomniac, this document (https://github.com/processing/process- 
ing/blob/master/core/README.md) has the technical details about why these changes 
were made. 

New 
Use the FX2D renderer for greatly improved 2D graphics performance. It has many 
improvements over the default renderer, though it has a few rough edges so we haven't 
made it the default. fullScreen() method makes it much easier to run sketches in, well, 
full-screen mode. The PVector class now supports chaining methods. 

SVG Export that works just like the PDF Export 

Anew settings() method that is called behind the scenes. Most users will never 
notice this, but if you’re using Processing without its preprocessor (i.e. from Eclipse 
or a similar development environment), then put any calls to size(), fullScreen(), smooth(), 
noSmooth(), and pixelDensity() into that method. More information can be found 
in the reference. Only users who are in other development environments should use 
settings(). It shouldn’t be used for any other purpose. 

Updated application icons. 

Changed 
The Video and Sound libraries are no longer included in the download (because they’ve 
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grown too large) and must be installed separately. Use Sketch > Import Library > Add 
Library... to install either one. 

Deprecated 
The variables displayWidth and displayHeight are now deprecated, despite being 
available in 3.0. 

Removed 
Lots of bugs 

Known Issues and What’s Coming 
There are plenty of issues and we could use some help! 

On Windows, launch4j doesn’t work from folders with non-native charsets. On 
an English version of a Windows system, any characters in CP1252 are fine. 

P2D and P3D windows behave strangely on OS X when larger than the screen 
size. 

When using cursor()in P2D and P3D, the cursor images do not match what you 
expect from the OS. 

When using Java 8u60 on Linux and OS X, smoothing is disabled for the JavaFX 
renderer. If you use the version of Java that’s included with Processing, you'll be fine. 

When using selectInput(), selectOutput(), and selectFolder() with OpenGL on 
Windows, the sketch window will close until the file is selected. We're waiting for an 
upstream fix from the JOGL project. 

Changes for Libraries, Modes, and Tools 
Some Libraries, and all Modes and Tools will need to be updated to be compatible with 
3.0. We'll be expanding this documentation to cover those changes and doing our best 
to support authors of these contributions through the changes. 

For the vast majority of authors, the changes are quite simple, and involve class 
name or package changes inside processing.app. 

The exception is any Library where 1) assumptions were made about PApplet- 
being a subclass of Applet (and Component), or 2) relied on AWT-specific features in 
processing.core. More about the changes to core can be found here. 

Modes and Tools need slight modifications because much of the UI code for 
Processing has moved from the processing.app package (which had grown unma- 
nageably large) into processing.app.ui. This doesn’t give us perfect separation of UI 
and non-UI code, but it’s a helpful step in the right direction. 

Several of the (static) utility functions from Base have moved into classes 
calledUtil, Messages, and Platform because Base was getting enormous. (It still is 
enormous, butit’s now a wee bit more reasonable.) Since enough other things 
are breaking in 3.0, we're not including accessors for the deprecated version of the 
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functions, just making aclean break. Common changes will include: 
Base.isMacOS() or Base.isWindows() becomes Platform.isMacOS() andPlatform. 
isWindows\() (sensible, right?) 

Base.showWarning() becomes Messages.showWarning() 

Base.log() becomes Messages.log() 

Agood rule of thumb is that if there are platform-specific qualities to it, it’s probably 

in Platform. If it’s amessage (whether a dialog box or a log file), it’s probably in Messag- 
es. And all those file utilities are in that Util class. 

Modes (and some Tools) will also need to be updated based on the major Ul 
changes in 3.0. The default “Java” Mode is now completely separate from the rest of the 
code, so it’s a decent model for understanding how to use the newEditorButton 
classes and similar. If your Mode subclasses JavaMode, you'll want to check out how 
Android Mode does this and how it imports the necessary classes from the Java 
Mode, since they're no longer on the default CLASSPATH. Starting in 3.0 beta 6, each 
Tool is only initialized once. This saves lots of time and memory. In beta 7, the init() 
method was changed to pass a Base object instead of Editor, because it’s necessary to 
call Base.getActiveEditor() whenever a Tool’s run() method is called. See the Tool 
Basics page for an example. 

The 2.0 and 3.0 lists of Libraries, Modes, and Tools are stored separately, so 
it’s possible to maintain both versions, if you'd like to do so. Users also have the 
ability to use separate sketchbooks for 2.x and 3.x versions of Processing, so they can 
have separate versions installed while the transition happens. 

Library authors, now is the time to reduce your reliance on AWT! In 3.0, we're 
moving away from AWT in a big way (here’s why). Any library features that require AWT 
should be treated with suspicion. Modes and Tools can still use AWT, but the OpenGL 
renderers (P2D and P3D) and the upcoming FX2D renderer don’t use AWT at all. 

This is one reason we built the processing.event classes in 2.x, and have been 
removing spurious AWT usage from the core API, documentation, and examples. 

It’s now been a couple years since we made those changes. 

The other reason is that we can’t rely on AWT features when targeting Java- 

Script or Android, so it was encouraging bad habits. 
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PRO Processing Libraries, 

009 = 2021. 

Contributed libraries are created by members of the Processing community. 
They are independently and generously created to share. They are all open- 
source and include their own reference and examples. This is the list of Librar- 
ies pulled from www.processing.org on 1 October 2021. 

Utilities 

- $1 Unistroke Recognizer, Darius Morawiec. Implementation of the $1 Gesture Recog- 
nizer, a two-dimensional template based gesture recognition. 

-Andrew’s Utilities (AULib), Andrew Glassner, Motion blur, fields, easing, waves, uni- 
formly spaced curves, globs, and more! 

-ColorBlindness, Jim Schmitz. Fast and easy-to-use utility for simulating color blind- 
ness or performing daltonization. 

-ColorScheme, J. Taylor OConnor. A tool to import color schemes. 

- CountdownTimer, Dong Hyun Choi. A countdown timer which triggers callback events 
for each user-defined tick interval during the timer’s duration. 

-Dawesome Toolkit, Brendan Dawes. Convenient utilities for some everyday tasks 
including simple layout using grids, lat lon distance calculation, creating patterns with 
a Vogel spiral, color pallete generation, displaying guides, simple debug panel as well 
as useful PVector list manipulation. 

- Free Transform, Bartosh Polonski. Transforms textures interactively. 

- GR Infinidecimal Canvas, C. Sina Cetin. Anumeric canvas that stores the image as a 
number array to create visuals with arbitrary ranges. 

-ID3, Jorge C. S. Cardoso. Extracts ID3 tags from Mp3 files. 

-Interfascia, Brendan Berg. Builds simple yet gorgeous user interfaces. 

- Keystone, David Bouchard. A library to help with basic projection mapping. 

- Live Brush, Boy d’Hont. A live-coding library that draws code brushes from external 
Java source code. 

- Most Pixels Ever, Daniel Shiffman. Framework for spanning Processing sketches 
across multiple screens. 

- Mother, Ilias Bergstrom. A library for live visuals performance with Processing sketches. 

- Mouse 2D Transformations, Alex Poupaki. Calculation of mouse coordinates in trans- 
formed 2D animation matrices. 

- Nest, Eric Socolofsky. Scenegraph and mouse event handling system based loosely 
on ActionScript 3.0. 

- Nice Color Palettes, Federico Pepe. Use the best color palettes from ColourLovers. 
comin Processing. 
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-nub, Jean Pierre Charalambos. Library that eases the creation of interactive scenes. 

-OOCSI for Processing, Mathias Funk. Processing client library for the OOCSI design 
middleware and Data Foundry access. 

- P8gGraphicsSVG, Philippe Lhoste. Allows Processing to export the drawings of a 
sketch in SVG format. 

-PortMods, Pike. Built for Processing 3, PortMods are pieces of Java code with input- 
and output ports that can be chained. 

- PostFX for Processing, Florian Bruggisser. Framework for applying post effects to 
PGraphic objects. 

-RunwayML Processing Library, George Profenza. Easily send and receive data 
between RunwayML and your sketches. 

- Scratch, Mike Barkmin. Provides classes to match the functionality of Scratch. 

- SketchMapper, J. Taylor OConnor. A GUI tool to map sketches onto surfaces. 

*spacebrewP5, Brett Renfer. A toolkit for prototyping interactive spaces. 

- TimedEvents, Jason Gessner. A couple of classes for firing off timed events at regular 
or random intervals. 

- Timing Utilities, Lord of Galax. Library containing a number of useful classes for 
time-keeping in Processing. 

Data 

-(Weka4P) Weka Machine Learning for Processing, Rong-Hao Liang. Implementation 
of the Open Source Weka Machine Learning Java library for Processing 3. 

- AndroidCapture for Processing, Jianbin Qi. This lib tries to transfer data (Android 
Camera & Android Sensor) between Processing and Android. 

- ArtNet for Java and Processing, Florian Bruggisser. Framework for sending and 
receiving DMX data over the ArtNet protocol. 

*BezierSQLib, Florian Jenett. A library to facilitate communication with SQL-based 
databases. 

- Carnivore, RSG. Surveillance tool for data networks. 

- Deep Vision, Florian Bruggisser. Deep computer-vision algorithms for Processing. 

* GML4U, Jerome Saint-Clair. A Graffiti Markup Language library for Processing. 

- HTTP Requests for Processing, Rune Madsen. A small library that takes the pain out of 
doing HTTP requests in Processing. 

- HiVis, Philip Poronnik, Oliver Bown, Oliver Coleman, Phillip Gough, Narayan Sankaran. 
Import data and manipulate it with statistical and other functions. Designed to be 
simple to use for novice programmers while being highly flexible and extensible. 
Includes many examples and tutorials. Check out olivercoleman.github.io/hivis fora 
30-second crash course. 
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- MapThing, Jon Reades. A collection of classes for reading and displaying Shape files 
(a.k.a. ESRI shapefiles), CSV, and GPX data ina map-based sketch. 

-OOCSI for Processing, Mathias Funk. Processing client library for the OOCSI design 
middleware and Data Foundry access. 

-QRCode, Daniel Shiffman. Reads QR Code images, a two-dimensional barcode 
format. 

-Redis, Darius Morawiec. Wrapper to use Redis in Processing. It’s based on Jedis, a 
small Java client by Jonathan Leibiusky. 

-RunwayML Processing Library, George Profenza. Easily send and receive data 
between RunwayML and your sketches. 

- SFTP, Daniel Shiffman. SFTP direct from Processing (using JSch). 

-SQuelized, Samuel Alarco Cantos. A library to facilitate the connection between 
Processing and SQL databases. 

- ShortMessage, Hamzeen. H. A library to send/receive short messages (SMS) from 
Processing. 

- Signal Filter, Raphael de Courville. Filters noisy and jittery signals. 

- Simple Tweet, Gottfried Haider. Posts images from Processing to Twitter. 

-SoundCloud, Darius Morawiec. Unofficial Java library, which simplifies the use of the 
official SoundCloud Java API wrapper. 

- Squarify, Agathe Lenclen. A squarify treemap layout generator. 

-Temboo, Temboo. Generate code to connect to 100+ APIs, code utilities, and data- 
bases in Processing. 

- UDP, Stephane Cousot. Enables simple UDP communication, as well as multicast 
support. 

- Unfolding Maps, Till Nagel. Creates interactive maps and geovisualizations. 

- WootingKeyboard, Shinhoo Park @ KAIST Interactive Media Lab. Analyzes the raw 
data of the Wooting keyboard. 

-XlsReader, Florian Jenett. A library to read from XLS (Excell) files. 

-oscP5, Andreas Schlegel. An Open Sound Control (OSC) implementation. 

Simulation 

- Al for 2D Games, Peter Lager. An Al framework suitable for 2D games and simulations. 

-Box2D for Processing, Daniel Shiffman. A library and set of examples for 2D physics 
simulation wrapping some aspects of JBox2D, a Javaimplementation of Box2D. 

- Carnivore, RSG. Surveillance tool for data networks. 

- Combinatorics, Florian Jenett. Generate combinations, variations and permutations. 

- Culebra Behavior Library for Processing, Luis Quinones. A collection of objects and 
behaviors for creating dynamic multi agent interactions. 
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- Fisica, Ricard Marxer. A wrapper for JBox2D, a 2D physics engine. 
- LiquidFunProcessing, Thomas Diewald. RigidBody/Particle simulation using JBox2d/ 


LiquidFun, a 2D physics engine. 

- PixelFlow, Thomas Diewald. PixelFlow is a Processing library for high-performance 
GPU-Computing (GLSL), like Fluid Simulation, SoftBody Dynamics, Rendering, Optical 
Flow, Image processing. 

-teilchen, Dennis P Paul. Simple physics library based on particles, forces, constraints 
and behaviors. 

1/0 

- AP-Sync, Nigel Tiany. Offers an easy way to sync data to processing from your Arduino 
or any microcontroller to processing and back. 

- Augmenta for Processing, Theoriz. Allows you to use tracking data coming from 
Augmenta systems. 

Console, Mathias Markl. A console, which can be drawn to the screen. 

- Drop, Ramin Soleymani. A processing library that lets you drag and drop objects such 
as files, images, bookmarks, or text into your processing sketch. 

-Game Control Plus, Peter Lager. Use joysticks, gamepads, and other control devices 
inyour sketch. 

- GifAnimation, Patrick Meister (extrapixel). Play, import, and export gif animations. 
Render to GIF. 

- Grab, Taka Iwai, Roy Tatum. An easy-to-use PDF/jpeg exporter. 

-IgnoCodeLib, Paul Hertz. Hierarchical display list for graphics and text with export to 
Adobe Illustrator 7.0 file format. 

- ImageLoader, Mathias Markl. Simple to use API to load images from either Instagram, 
Flickr, Google, Giphy, Tumblr or your file system. 

- Image Sequence Player, George Profenza. A simple library for loading, playing back 
and displaying image sequences. 

- MQTT, Joel Gaehwiler. MQTT library for Processing based on the Eclipse Paho project. 

- MindSet Processing, Jorge C. S. Cardoso. Allows you to use the NeuroSky Mindset 
brainwave sensing headset with Processing. 

- MuKCast, Mathias Markl. A light-weight client/server library. 

-NXTComm Processing, Jorge C. S. Cardoso. Allows you to control the Lego Mind- 
storms NXT robots. 

- Novation Launch Controller client, Half Scheidl. Control your sketches using the knobs 
and pads from Novation® Launch Control®. 

- OBJExport, Jesse Louis-Rosenberg. This is a simple library to export surfaces from 
processing as OBJ files. Itis used the same way the PDF library is used. 
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-OOCSI for Processing, Mathias Funk. Processing client library for the OOCSI design 
middleware and Data Foundry access. 

-SelectFile, Ostap Andrusiv. Android library which provides Dialogs for selectinput(), 
selectFolder(), and selectOutput() methods. 

- Simple HTTP Server, Ramin Soleymani. A simple HTTP Server for Processing, that 
serves static files and simplifies HttoHandler. 

- Simple Multi-Touch (SMT), Erik Paluka. Multi-touch prototyping and development 
made simple. 

- Simple Receipt Printer, Gottfried Haider. Print on attached Thermal Receipt Printers. 

- Simple Touch, Gottfried Haider. Touch events for Raspberry Pi and other Linux-based 
computers. 

- Skweezee for Processing, Bert Vandenberghe @ eMedia Research Lab, KU Leuven. 
Create rich interactions based on physical squeezes. 

- Tablet, Andres Colubri. A library for using pen tablets from Processing. 

-Tramontana, Pierluigi Dalla Rosa. Prototyping and creative kit for multi-device interac- 
tions and experiences. 

- VSync for Processing, Maximilian Ernestu. Will magically synchronize variables among 
Arduinos and your Processing sketch. 

- Video Export, Abe Pazos. Simple video file exporter. 

-Websockets, Lasse Steenbock Vestergaar. Creates websocket servers and clients, 
which makes it possible to communicate with the outside world including web sites. 

- WootingKeyboard, Shinhoo Park @ KAIST Interactive Media Lab. This library can be 
used to analyze the raw data of the Wooting keyboard. 

- proJMS, Hauke Altmann. Publish and consume text messages to create peer-to-peer 
communication between processing applications. 

Animation 

- Ani, Benedikt Gross. A lightweight library for creating animations and transitions. 

Green, Zacchary Dempsey-Plante. A gaming library that enables easy 2D game 
creation within Processing. 

- Sprites, Peter Lager. Sprite control and animation for games and other graphic 
applications. 

- Tilt for Processing, Nick Fox-Gieg. Reads Tilt Brush files in Processing. 

Hardware 

- Apple Light Sensor, Martin Raedlinger. Interface to the Light Sensor in MacBook Pro 
computers. 

- Arduino (Firmata), David A. Mellis. Controls Arduino boards running the Firmata 
firmware. 
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- BlinkStick, Arvydas Juskevicius. Interface BlinkStick-smart USB RGB LED. 

-DMX4Artists, Jayson Haebich. Easy-to-use library for controlling DMX lights with an 
FTDI USB controller. 

-dmxP512, Henri DAVI. DMX output for enttec DMX USB PRO and lanbox LCE. 

- Eye Tribe for Processing, Jorge C. S. Cardoso. A library to get eye gaze data from the 
Eye Tribe device. 

- GaussSense SDK for Processing, GaussToys Inc.. Library to use the GaussSense in 
Processing. 

- GazeTrack: Eye-tracking for Processing (Tobii EyeX and 4C), Augusto Esteves. Library 
that supports basic gaze tracking using various Tobii eye-trackers. 

-HPGLGraphics, Ciaron Linstead. Write HPGL output from Processing sketches, 
suitable for sending to a pen-plotter. 

- Hardware I/O, The Processing Foundation. Access peripherals on the Raspberry Pi 
and other Linux-based computers. 

- Intel RealSense for Processing, Florian Bruggisser. Intel RealSense support for 
Processing. 

-Ketai, Daniel Sauter. Android library for working with sensors, cameras, multi-touch, 
networking, Bluetooth, WiFi Direct, Near Field Communication, and SQLite. 

- Leap Motion for Processing, Darius Morawiec. Library to use the Leap Motion in 
Processing. 

- Myo for Processing, Darius Morawiec. Library to use the Myo in Processing. 

- PS3Eye, Thomas Diewald. A PS3Eye library using libusb. 

- PixelPusher, Jas Strong and Matt Stone. System for controlling an unlimited number of 
LEDs. 

- Simple Phidgets, Shachar Geiger. A really simplified wrapper for using Phidgets in 
Processing. 

- Skweezee for Processing, Bert Vandenberghe @ eMedia Research Lab, KU Leuven. 
Create rich interactions based on physical squeezes. 

- Sudden Motion Sensor, Daniel Shiffman. Interface to the Apple Sudden Motion Sensor 
in MacBooks. 

- Sweep for Processing, Florian Bruggisser. Scanse Sweep LIDAR API for Processing. 

Sound 

- Beads, Ollie Bown. A library for adding flexible real-time audio to Processing sketches. 

- Cassette, Shlomi Ho. Implementation of Processing Sound APIs for Android. 

- ComposingForEveryone, Guido Kramann. Gives support for applications in sound 
generation, simple web-cam-image processing, numerical simulation and—provided 
by examples—especially for algorithmic real-time composition of music. 
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-Loom, Cora Johnson-Roberson. Patterns that change over time, flexibly mapped to 
audiovisual output. 

- The MidiBus, Severin Smith. Minimal MIDI library for Processing, no frills, no 
limitations. 

-Minim, Damien Di Fede. An audio library that provides easy to use classes for playback, 
recording, analysis, and synthesis of sound. 

-Pd4P3, Robert Esle. A real-time audio synthesis library of Pure Data’s signal objects 
for Processing 3. 

- ProcMod player, Arnaud Loonstra. An old-school MOD tracker player based on 
JavaMod! 

- Sound, The Processing Foundation.Provides a simple way to work with audio. 

- SuperCollider client for Processing, Daniel Jones. Framework to interface with the 
SuperCollider synthesis engine. 

-tactud, Alessandro Capozzo. Aids in the creation of algorithmic music in real time. It 
consists of a set of classes focused on defining musical elements, utility classes and 
an aggregator. 

-ttslib, Nikolaus Gradwohl. Makes your sketches speak with the help of freetts. 

-wellen, Dennis P Paul. Framework for exploring and teaching generative music making 
and algorithmic compositions. 

-XYscope, Ted Davis. Library for Processing to render graphics ona vector display 
(oscilloscope, laser) by converting them to audio. 

Video & Vision 

- BlobDetection, Julien ‘v3ga’ Gachadoat. Computer vision library for finding blobs in an 
image. 

- BoofCV for Processing, Peter Abele. Processing interface for BoofCV. 

*GL Video, Gottfried Haider. Hardware-accelerated video on the Raspberry Pi & Linux. 

- Image processing algorithms, Nick ‘Milchreis’ Miller. Implementations of basic image 
processing algorithms for processing. 

-Kinect4WinSDK, Bryan Chung. A simple wrapper for the Microsoft Kinect for Windows 
SDK version 1.8. 

-Kinect v2 for Processing, Thomas Sanchez Lengeling. Kinect v2 implementation using 
the Kinect Windows SDK. 

-nyar4psg, R.lizuka. NyARToolkit for proce55ing(NyAR4psqg) is front-end of NyARToolkit 
for Java. This library can easily make the AR application. 

- OpenCV for Processing, Greg Borenstein. Computer vision with OpenCV. 

- Open Kinect for Processing, Daniel Shiffman. A Mac OS X Kinect implementation 
using open-source drivers (libfreenect). 
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- PS3Eye, Thomas Diewald. A PS3Eye library using libusb. 
- Spout for Processing, Lynn Jarvis. For openGL texture sharing between Microsoft 
Windows applications using the Spout framework. 
-tramontanaCV, Pierluigi Dalla Rosa. A toolkit for sensing people in spaces with phones. 
- VLCJVideo, Caldas Lopes. VLCJ binding for Processing. 
- Video, The Processing Foundation. GStreamer-based video library for Processing. 
3D 


-Camera 3D, Jim Schmitz. Alter P3D Rendering to produce Stereoscopic Animations, 
360 Video and other 3D effects. 

- Collada Loader for SketchUp and Blender, Markus Zimmermann. Importer for kmz and 
dae files created by 3D softwares SketchUp 8 or Blender 2.75a. 

- extruder, Max Farrell. A 3D library to create extrusions. 

-iGeo, Satoru Sugihara. 3D geometry library with packages of NURBS geometry, poly- 
gon mesh geometry, vector math, 3D display and navigation, 3D data file I/O and 
agent-based 3D geometry modeling. 

- Lunar, Boy d’Hont. Parametric design library for the minimalist, inspired on existing 
node-based plug-ins for CAD software. Holds algorithms for easy generation and 
adaptation of polygon meshes, vectors, and list patterns. 

- OCD: Obsessive Camera Direction, Kristian Damkjer. Allows intuitive control and 
creation of Processing viewport Cameras. 

- Patchy, Jonathan Feinberg. Provides an easy-to-use bicubic patch for 3D Processing 
sketches. 

- PeasyCam, Jonathan Feinberg. A mouse-driven camera-control library for 3D 
sketches. 

- Picking, Nicolas Clavaud. Pick an object in a 3D scene. 

- planetarium, Andres Colubri. This library provides a renderer to project 3D scenes on 
afulldome. 

- QueasyCam, Josh Castle. A super-simple FPS camera for Processing. 

- Shapes 3D, Peter Lager. 3D Shape creation and display made easy. 

Math 

- Combinatorics, Florian Jenett. Generate combinations, variations and permutations. 

- grafica, Javier Gracia Carpio. Create simple and configurable 2D plots with 
Processing. 

-gwoptics, Daniel Brown and Andreas Freise. Tools for drawing graphs in 2D and 3D. 

- Jasmine, Peter Lager. A super-fast numerical expression and algorithm calculator. 

-QScript, Peter Lager. Algorithm and expression evaluator. 

Geometry 
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- Computational Geometry, Mark Collins & Toru Hasegawa. A simple, lightweight library 
for generating meshes such as isometric surfaces, boundary hulls, and skeletons. 
- Dashed Lines, Jose Luis Garcia del Castillo. Draw shapes with dashed lines! 
- Geomerative, Ricard Marxer. Extends 2D geometry operations to facilitate generative 
geometry. Includes a TrueType font interpreter. 
- OCT, Thomas Wegener. A Processing library to create, modify, and display Octree 
structures. 
- Squarify, Agathe Lenclen. A squarify treemap layout generator. 
-handy, Jo Wood. Hand-drawn sketchy rendering in Processing. 
GUI 
-ControlP5, Andreas Schlegel. A GUI library to build custom user interfaces for desktop 
and Android mode. 
- GAP, Peter Lager. Provides a set of 2D GUI controls and multiple window support. 
- Guido, Florian Jenett. A simple cross-mode GUI library. 
-Interfascia, Brendan Berg. Builds simple yet gorgeous user interfaces. 
-meter, Bill (Papa) Kujaw. Display software, Arduino, or other sensor values in an analog 
meter. 
- UiBooster, Nick ‘Milchreis’ Miller. Creates fast and easy GUI components for your 
sketch. 
Language 
- Eliza, Andres Colubri. The classic Eliza psychologist program. 
-RiTa, Daniel C. Howe. A library for natural language and generative writing. 
Typography 
-Fontastic, Andreas Koller. A font file writer to create TTF and WOFF (Webfonts). 
Compilation 
- GenerativeDesign, Hartmut Bohnacker, Benedikt Gross. A collection of various 
functions belonging to the book Generative Design (English), Generative Gestaltung(- 
German) and Design Generatif (French). 
-gicentreUtils, Jo Wood. Assists creation of data visualization sketches. 
-ToxicLibs, Karsten Schmidt. An independent, open source library collection for com- 
putational design tasks. 
Other 
- Green, Zacchary Dempsey-Plante. A gaming library that enables easy 2D game 
creation within Processing. 
- Path Finder, Peter Lager. Find paths through 2D/3D navigation graphs. 
-Ptmx, Caldas Lopes. Add Tiled maps to your sketch. 
- Steganos, Peter Lager. Steganography made simple. 
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PRO Processing People, 
010 = 2001-2021. 
This is a list of people who have joined the team to work on Processing or 
the Processing website. It doesn’t include people who have created indepen- 
dent software libraries or who have moderated the Processing forums. We 
started this list in 2003 and have published it to the Processing website since. 
When people are no longer actively working on Processing, they are moved 
into the Alumni section. 
Project Leads 
Ben Fry and Casey Reas started Processing in Spring 2001 and continue to obsessively 
work onit. In 2012, they started the Processing Foundation along with Dan Shiffman, 
who formally joined as a third project lead. 
Developers 
- Andrés Colubri (Boston), OpenGL / Video 
* Elie Zananiri (New York), Contributed Libraries / Tools 
- Samuel Pottinger (San Francisco), Processing Core 
Libraries, Tools 
The core Processing software is augmented by libraries and tools contributed through 
the community. These inventive extensions are a bright future for the project. We 
have a list of Contributed Libraries and Contributed Tools posted online. These contri- 
butions can’t be underestimated. For example, see how Karsten Schmidt has trans- 
formed Processing through the toxiclibs library and how Damien Di Fede has extended 
the project into programming sound through the minim library. 
Website and Design 
Design Systems International designed and built the current website and the new 
Processing family of logos through a year of dedicated volunteer work. A remarkable 
group of volunteers converted all of the content from the prior Processing website 
to the new formats. A hearty round of applause for: 
- Tetsu Kondo 
- Mark Webster 
- Lionel Radisson 
Chris Coleman 
- Justin Gitlin 
-Seenahm Suriyasat 
- Shobhit Sharma 
Karan Dudeja 
- Mark Hancock 
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- Peter Jacobson 
- Oguzhan Goregen 
-Bryan Ma 
- Ashley James Brown 
Processing People Alumni 

- Jakub Valtar, Processing Core 
- Scott Garner, Hello Processing Website 
- Scott Murray, Website / Reference / UI 
- Gottfried Haider, Processing for Pi 
- Florian Jenett, Forum 
- Jamie Kosoy, Website 
-Manindra Moharana, PDE/ Core 
- James Grady, Visual Design 
- Patrick Hebron, Video Library (Summer 2011) 
- Peter Kalauskas, Library/Tool/Mode Install Utility (Gummer, 

Fall 2011) 
- Andreas Schlegel, Libraries (Winter 2008 - Summer 2011) 
- Harshani Nawarathna, Processing Development Environment (Summer 2011) 
- Cindy Chi, Reference Editing (Summer 2011) 
- Jonathan Feinberg, Parsing & Android Hacking (Spring 2011) 
- Chris Lonnen, Processing Development Environment (Summer 2011) 
- Eric Jordan, Graphics Weapon (2007 - 2009) 
- Tom Carden, Processing Hacks Director (Summer 2005 - Fall 2008) 
- Lenny Burdette, Website renovation (Summer 2005 - Winter 2006) 
- Simon Greenwold, Lighting and Camera (Winter 2005) 
- Kevin Cannon, Website CSS (Fall 2004) 
-Toxi, Graphics Gem (Summer 2003 - Summer 2004) 
- Ariel Malka, Bagel Papa Poules (Summer 2003 - Winter 2004) 
- Martin Gomez, Web engines (Spring 2003) 
- Mikkel Crone Koser, Windows Platform Czar (Summer 2003 - Winter 2004) 
- Koen Mostert, Windows Platform Czar (Summer 2003 - Winter 2004) 
- Timothy Mohn, Platform Czar Mac (Winter 2003 - Winter 2004) 
-Dan Mosedale, Preprocessor and Compiler (Spring, Summer 2003) 
- Carlos Rocha, Sound and Graphics (Spring, Summer 2003) 
- Jacob Schwartz, Windows Platform Czar (Winter 2003 - Winter 2004) 
-Cem Uzunoglu, Web Scripts for Exhibition (Summer 2003) 
- Dara Kilicoglu, Web Scripts for Exhibition (Summer 2003) 
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-SamiArola, 3D Graphics Engine (Summer 2003) 
- Marc Escobosa, Reference Engine (Spring 2003) 
- Mathias Dahlstrom, Examples, Reference (Spring 2003) 
- Dan Haskovec, Processing Environment (Summer 2003) 
Alpha Reference Translators 
-Widianto Nugroho, Indonesian 
- Tetsu Kondo, Japanese 
- William Ngan, Tori Tan, Mei Yu, Chinese Traditional and Simplified 
- Art Center Nabi, Tae-Kyung 
Kim, Korean 
- Julien Gachadoat, French 
- Pedro Alpera, Spanish 
- Alessandro Capozzo, Italian 
* Burak Arikan, Turkish 
We offer a special “Thank You!” to Sami Arola for writing the base of the original 
P3D and Simon Greenwold for incorporating camera and lights. Tom Carden con- 
tributed great energy by co-creating Processing Hacks and maintaining Processing 
Blogs. Andreas Schlegel did amazing work for over three years organizing the Con- 
tributed Libraries and building templates and documentation. 
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PRO Processing and FLOSS, 2017, 
011 Casey Reas. 

Processing is FLOSS software. FLOSS is an acronym for Free, Libre, Open- 

Source Software. As defined by the Free Software Foundation, the term Free 

Software has four essential freedoms: 

-to run the program 

-to study and change the program in source code form 

-to redistribute exact copies 

-to distribute modified versions 
The term Open Source originated after Free Software. It was defined to move the con- 
versation toward one aspect of Free Software, the ability to read the source code. 
It’s clear that the name Free Software leads to a partial understanding of what it means, 
that the software is likely to be “free” to use. This phrase Free Software is also con- 
fused with Freeware, another category of software where the software is free to use, but 
the source code can be closed. Many people in the Free Software community ar- 
gue with people who promote Open-Source software about fundamental ideas and 
vice versa. 

The acronym FLOSS is sometimes used to bridge the communities and their 
differing opinions. The word /ibreis added to free to make the goal of “free as in 
freedom,” the ideals of liberty, more clear. Within the domains of computer science and 
systems administration, there are many influential FLOSS software projects. For 
instance, the Apache HTTP Server is used more than proprietary software in the same 
domain. Incontrast, there’s comparatively little FLOSS software within design and 
arts communities. These domains are dominated by proprietary software, specifically 
by Adobe Systems and Autodesk. 

We believe visual artists and designers should be in control of their own soft- 
ware tools. It’s not enough to rely on corporations to make what we need. The 
code and systems that we use shape our work. When companies release proprietary 
platforms and we use them, we don’t have freedom to modify and expand them. 

As makers, we feel it’s essential to have tools that we create ourselves, tools that are 
shaped by the needs and desires of the communities of creators that use them. 

In addition to the creative limitations of proprietary software, there are also finan- 
cial concerns. As | am writing this, a one-year license for the Maya animation soft- 
ware from Autodesk is $1,470 USD. A one-year license for the Illustrator drawing soft- 
ware from Adobe Systems is $240 USD, or $19.99 USD a month. In both cases, this 
is great for profits, but it’s not good for access. This is beyond the reach of high school 
students and independent artists. It’s also a large expenditure for educational insti- 
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tutions and students. In addition, the source code isn’t available and the software can’t 
be modified. There may be a place for proprietary, commercial software within the 
arts, but there’s a need for alternatives to support wider and more diverse audiences. 

All ofthe Processing Foundation software (Processing, p5.js, Processing.py, Pro- 
cessing for Android, Processing for ARM) are distributed without cost and the code is 
available for people to learn from and to modify. The Processing software is distributed 
under the GPL (GNU General Public License) and LGPL (GNU Lesser General Public 
License). Creating FLOSS software, however, is not without costs. We have learned, oft- 
en the hard way, that “Free Software is expensive to make,” but for people who 
want to use the software and who don’t have the means to purchase or write their own 
software, ours is entirely free and open for use. 

It’s accurate to say that Processing wouldn't have launched without Free Soft- 
ware and other software under compatible licenses. Now, as when it was first re- 
leased, Processing combines existing FLOSS software modules into its source code. 
These other projects include jEdit, ECU, JNA, launch4j, quaqua, ORO, and Jikes. 

FLOSS software is an ecology where thousands of projects, large and small, can be 
combined in different ways to create new software. This creates complex contin- 
gencies. If one of these parts stops being maintained or has an error, the other soft- 
ware within the ecology are affected. There are negative impacts to building code 
within a FLOSS ecology, as well as the positives. As with everything, there are highs and 
lows to creating and working with Free Software. We've benefited tremendously from 
the work that others put into the software we utilize as core components of Processing 
and we hope that others have benefitted from our unique code. We believe in the 
fundamental freedoms of Free Software and that is our path. 
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PRO Processing.py, 2010, 
012 Jonathan Feinberg et al. 

Python Mode for Processing was chiefly developed by Jonathan Feinberg, with 

contributions from James Gilles and Ben Alkov. The Python Mode exam- 

ples, reference, and tutorials were ported and/or created by James Gilles, Allis- 

on Parrish, and Miles Peyton. Casey Reas, Ben Fry, Daniel Shiffman, and 

Golan Levin provided guidance and encouragement. 

Support for the development of Processing.py came from many sources. 
Jonathan Feinberg implemented Processing.py independently from July 2010 through 
April 2014; since then, Google has kindly supported his efforts. In summer 2014 
work on the Reference, Examples, and Tutorials was funded in part by the Integrative De- 
sign, Arts, and Technology (IDeATe) initiative at Carnegie Mellon University, and by 
a grant from the National Endowment for the Arts managed by the Frank-Ratchye STU- 
DIO for Creative Inquiry at CMU. The Processing Foundation and Fathom have also 
provided critical logistical support for this work. 

Much of the work in achieving compatibility with Processing 3.x was done 
by Luca Damasco (Google Summer of Code student), under the supervision of Golan 
Levin, with additional support from the Frank-Ratchye STUDIO for Creative Inquiry 
at Carnegie Mellon University. 

Examples 

Hue is the color reflected from or transmitted through an 

object and is typically referred to as the name of the color 

(red, blue, yellow, etc.) Move the cursor vertically over 

each bar to alter its hue. 

barWidth = 20 

def setup(): 
size(32 * barWidth, 360) 
colorMode(HSB, height, height, height) 
WnoStroke( ) 
background(0) 

def draw(): 
whichBar = mouseX / barWidth 
barX = whichBar * barWidth 
fill(mouseY, height, height) 
rect(barX, 0, barWidth, height) 
lastBar = whichBar 
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Continuous Lines. Click and drag the mouse to draw a line. 
def setup(): 
size(640, 360) 
background(102) 
def draw(): 
stroke(255) 
if mousePressed == True: 
line(mouseX, mouseY, pmouseX, pmouseY) 
Conditionals are like questions. They allow a program to 
decide to take one action if the answer to a question is true 
or to do another action if the answer to the question is false. 
size(640, 360) 
background(0) 
for i in range(10, width, 10): 
# If ‘i’ divides by 20 with no remainder draw the first 
line 
# else draw the second line 
if i% 20 == 0: 
stroke(255) 
line(i, 80, i, height / 2) 
else: 
stroke (153) 
line(i, 20, i, 180) 
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PRO Processing for Pi Technical Notes, 2017, 
013 Gottfried Haider. 

The port of Processing to the ARM architecture has been developed by Gottfried 

Haider since 2015. It has been supported by a Google Summer of Code fell- 

owship in 2015 and a Processing Foundation fellowship in 2017, both times men- 

tored by Ben Fry. The website was developed by Maks Surguy, who also con- 

tributed the tutorials during his Google Summer of Code fellowship in 2018. Both 

greatly improved the project’s accessibility. 
The (original) Raspberry Pi contained an ARMv6 CPU, and 256 or 512 MB RAM. The 
Raspberry Pi 2 contains a quad-core ARMv/ CPU, and 1 GB of RAM. The Raspberry Pi 3 
and 3+ contain a quad-core ARMVv8 (64-bit) CPU, which can also be operated in an 
ARMv/ compatible mode. It contains the same 1 GB of RAM. The Raspberry Pi Zero and 
Raspberry Pi Zero W feature the same ARMv6 CPU as the original Raspberry Pi, and 
512 MB RAM. They all contain the same Broadcom VideoCore IV graphics processor. 

All models primarily run a modified version of the Debian Linux distribution 
named Raspbian that was made to run on the ARMvé6 CPU (and higher). 

On the Pi 2, 3, and 3+ itis also possible to run other, unmodified Linux distribu- 
tions, such as Debian or Fedora, since those settled on the ARMVv/ architecture as their 

“baseline” for modern ARM support. However on those distributions you might not 
have the necessary kernel modules and graphics library to make full use of the Pi’s per- 
ipherals. This page thus specifically talks about running Processing on Raspbian. 

“Legacy” Graphics 
The Pi’s graphics core exposes OpenGL ES 2.0, whichis supported by Processing 
P2D and P3D renderer, thanks to specific enablement in the underlying library, JOGL. 
The graphics driver is built around a closed-source driver (found in /opt/vc), which 
limits our ability to troubleshoot bugs for the moment. 

Due to a limitation of this driver, P3D is currently limited to using two lights. 
Certain sketches might run out of video memory and throw an exception mentioning 
GL_OUT_OF_MEMORY. You might be able to work around this by changing the 
memory split-the amount of memory allocated for the GPU from all system memory. 
To do so, open the Raspberry Pi Configuration (under Menu, Preferences), navigate 
to the Performance tab, change the amount of “GPU memory” and then restart your Pi. 

Experimental Graphics 
Alternatively, Raspbian also includes a free and open source Mesa driver, named 
vc4, which can be enabled by running sudo raspi-config in a terminal, and selecting 
either GL (Full KMS) or GL (Fake KMS) under Advanced Options and GL Driver. (The 
current default is Legacy, which is described in the section above.) 
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This driver might run notably faster than the legacy graphics, supports up to four lights, 
and does not show some glitches that plague the other driver. 

As of now the experimental driver does not yet support hardware-enabled video 
decoding, the camera module, as well as some screens that can be attached to the 
DSI interface, which should be forthcoming in future versions of Raspbian. 

GPIO 
Keep in mind that the Pi uses 3.3V levels, rather than the 5V of the Arduino Uno. The pins 
are said not to be 5V tolerant, so make sure to keep your voltages to 3.3V. 

Each pin is rated up to 16 mA per pin, with 50 mA total, across all pins. (The Ard- 
uino UNO is 20 mA @ 5V per pin.) Make sure not to draw more current. 

The Hardware |/O library’s GPIO class uses GPIO numbers with its methods. 
Those are not the same as the physical pin numbers of the pin header. (see pinout) 

l2C 
The Pi has one (publicly exposed) hardware |2C interface. To use it in Processing 
(with the I2C class in processing.io), open the Raspberry Pi Configuration (under Menu, 
Preferences), navigate to the Interfaces tab, enable I2C and then restart your Pi. 

After restarting, I2C.list() should return one interface: e.g. i2c-1 onthe Pi 2. The 
interface is located on pins 3 (SDA) and 5 (SCL) on the Pi’s header. (see pinout) 

Ground is conveniently located right next to it, on pin 6. Use it together with the 3.3V 
supply on pin 1, since that is the level that the Pi expects. 

SPI 
The Pi has two hardware SPI interfaces, but which share all but the SS (Slave Select) 
pins. To use it in Processing (with the SPI class in processing.io), open the Raspberry Pi 
Configuration (under Menu, Preferences), navigate to the Interfaces tab, enable SPI 
and then restart your Pi. 

After restarting, SPI.list() should return two interfaces spidev0.0 and spidev0.1. 

The interfaces’ pins are located on the Pi’s header on pins 19 (MOSI), 21 (MISO), 
23(SCLK), 24 (SS, aka CEO) and 26 (SS, aka CE1). (see pinout) When using spidev- 

0.0, pin 24 (CEQ) is being pulled low during a transaction, while pin26 (CE1) remains 
unchanged. When using spidev0.1, pin 26 (CE1) is being pulled low, while pin24 

(CEQ) remains unchanged. (This is to be able to address two devices on the same data 
& clock lines.) 

LEDs 
The Pi has two on-board LEDs, led0 and led1, which can be controlled through the 
LED class in Processing. 

Since the regular user (named pi) is by default not permitted to write to the 
LED device, you must enable this once by running 
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sudo sed -i ‘slexit O|chmod -R a+zw /sys/class/leds/*\nexit 

0|’ /etc/re.local 
After a restart, the devices should be read- and writable by any user. (This can be con- 
firmed by running Is -I /sys/class/leds/led0/brightness. The resulting line should 
start with -rw-rw-rw-.) 

On the Pi, led0 is the green (I/O activity) light, while led1 is the red (power) 
light. They only can be turned on and off, so brightness() values besides 0.0 and 1.0 
have no effect. 

Serial 
The Pi has one exposed serial port, on pins 8 (TXD) and 10 (RXD). (see pinout) Like 
all other pins, these operate on 3.3V TTL levels, instead of the RS-232 voltage levels nor- 
mally expected from a computer's “serial port.” 

To enable the serial port device to be used with Processing, start the text-based 
Raspberry Pi Configuration tool by executing the following command in a terminal: 

sudo raspi-config 
With the arrow-keys and Enter, navigate to Interfacing Options, Serial. In the dialog 
that appears, answer No to the question whether or not to use the port for alogin shell. 
Answer Yes to the question whether the serial port hardware should be enabled. 
Reboot the Raspberry Pi for the changes to have effect. 

The serial port will be available to Processing’s Serial library under the name 
/dev/serial0. (This will be an alias to /dev/ttySO on models that have Bluetooth function- 
ality, and an alias to /dev/ttyAMA0 on models that lack Bluetooth.) 

Video library 
Use the new GL Video library to make use of the Raspberry Pi’s accelerated video 
decoding hardware. (also available from the Contribution Manager) 

Examples show the various ways the library can be used. Please file issues here. 
Video library: Capture 

If you’re receiving the error IllegalArgumentException: No such Gstreamer 
factory: v4l2src with the (regular) Video library, try installing the necessary packages by 
executing sudo aptitude install gstreamer0.10-plugins-good in a terminal. 

Alternatively, the GL Video library also contains some (very limited) functionality 
for using capture hardware. See this example for details. 

If you want to use the Raspberry Pi camera with the GL Video library, add the fol- 
lowing line to your /etc/modules file and reboot: 

bem2835_v4l2 
(Note this is a lowercase L not anumber one.) After the reboot your camera should show 
up as /dev/videoO. 
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Touchscreen 
The simpletouch library makes it possible to use any multi-touch-enabled display 
or trackpad with Processing, as long as the device is supported by the Linux kernel. 
This library is available through the Contribution Manager under the name “Simple 
Touch.” 

This works well with the official Raspberry Pi display, and allows for tracking 
of up to 10 fingers. 

Two example sketches the library comes with explain how to use it. Please 
file issues here. 

Libraries 
Most libraries from the Contribution Manager work just fine without any change neces- 
sary to run on ARM. Exceptions to this are libraries that come with parts written in 
“native code,” which is platform- and architecture-dependent, and hence needs updat- 
ing. As a general rule of thumb: If you find (sub-) directories for different platforms 
inside the library's library directory, then this is likely the case. 

If youcome across a library that’s not working, or if you need help compiling 
alibrary for ARM, please open an issue. 

Library: OpenCV 
ARM devices are supported by Greg Borenstein’s OpenCV library starting with version 
0.5.4 (available in the Contribution Manager). 

Library: OpenKinect 
Atest version of Open Kinect for Processing, with support for armv6hf, can be found 
here. (PR #1 #2) On most ARM devices this will only work (if at all) with the Kinect 
1, because of the high demand on USB throughput of the Kinect 2. Don’t forget to place 
the file 51-kinect.rules in /etc/udev/rules.d for Processing to be able to access the 
Kinect’s camera. 

Library: PureData 
The puredatapd library allows you to write sketches in Processing that control and inter- 
act with musical patches prepared in Pure Data. See the accompanying HelloPd 
example for how it works. This library requires PortAudio to be installed, which seems to 
be the case for current releases of the Raspbian distribution. This library is not yet 
available through the Contribution Manager, but support for ARM was merged into its 
main repository. 

Library: Processing Sound 
ARM devices are supported by Processing’s Sound library starting with version 1.4.0 
(available in the Contribution Manager). 

FX2D 


PROCESSING PRO 013 199 


The experimental FX2D renderer is not supported on ARM, because Oracle dropped 
support for JavaFX on ARM devices with Java 8u33. We might want to try using Open- 
JFX project in the future, but as of now this is unsupported. 
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PRO The New Processing for Android Notes, 2017, 
014 Andrés Colubri. 

Processing’s relationship to mobile devices goes back to the beginning. Ben Fry 

had versions working on Compaq iPAQs back in the early 2000s. Francis Li 

developed the Mobile Processing version of Processing to run as J2ME applica- 

tions dating to 2005. The processing.org subdomain mobile.processing.org 

launched 20 September 2005! 

The Android version of Processing recently reached an important milestone: ver- 

sion 4 of the Android mode, supporting the most recent releases of the Android Oper- 
ating System, and enabling the creation of live wallpapers, watch faces, and Virtual 
Reality apps. Together with an updated site and an upcoming book, we are very excited 
to see what the Processing community will create with the new Processing for 
Android. This milestone would have not been possible without the help and support 
from many dedicated people at the Processing Foundation, Google Creative Lab 

New York, and Google Summer of Code program — the latter of which, specifically the 
projects of Sara Di Bartolomeo and Rupak Das, | will describe in more detail in 

this post. 

Processing for Android has been around for awhile. After initial conversations 
with Andy Rubin, the creator of Android, back in February of 2009, Ben Fry got Process- 
ing code from Casey Reas to work on the G1 phone, the first commercially released 
device to use Android. Ben and Jonathan Feinberg then wrote the foundations of the 
Android mode, which have been in use ever since. At the time, | had the opportunity 
to make my first contribution to the core of the Processing project by writing the 3D en- 
gine in Android mode, which eventually became the basis for the OpenGL renderer 
in the desktop version of Processing as well. 

= However, the Android platform did not re- 

main static. Since its first public release 
in 2009, it grew to become the most widely 
used mobile operating system world- 
wide, with many changes in its architecture 
and functionality along the way. With 
Processing for Android, we tried to follow 
FIG —_Left: Processing code running on the G1 phone UP these changes to make sure that 
014-01 in 2009. Right: Processing sketch runningon the Android mode is up-to-date and sup- 

the Nexus One in 2010. ports new devices and features. As | 
mentioned, the latest version of the mode lets you create VR and watch face apps, 
introduced in the past few years with Google VR and Wear. 
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It’s worth noting how smartphones be- 
came the primary, if not only, com- 
puting device many people use on a regu- 
lar basis. On one hand, itis natural to 
marvel atthis feat of technology that put per- 
sonal computers in the pockets of a 
significant percentage of the world’s popu- 
lation. But on the other hand, we should 
ask ourselves how much control and own- 
ership we have over the software that 
runs on these devices, and perhaps more 
FIG Wrist watch with tree pattern importantly, on the data that they col- 
014-02 filling the face. lect continuously about our interactions, 
habits, and whereabouts. A project like Processing can play an important role in 
answering these questions, by making the programming of mobile devices more acces- 
sible to their own users. 

The open source aspect of Android has significantly helped us to develop Proce- 
ssing for Android, and to maintain it over the years. An important piece of this work 
is enabled by the Google Summer of Code (GSoC) program, which provides funding for 
college students from around the world to work on open source projects, paired 
with a mentor from the project. We were very lucky to have exceptionally talented stu- 
dents tackling challenges in Processing for Android, starting with Imil Ziyaztdinov 
and Mohammad Umair in the 2014 and 2015 editions of GSoC, respectively. 

This yet) we ~ mo students working on Android-specific projects within 
. “E Processing: Sara Di Bartolomeo and 
See Rupak Das. What made their contributions 
very special is that they were key to this 
new release of the Android mode: 
Rupak worked on the underlying code in- 
side the Android mode that does the 
heavy lifting by building the Processing 
sketches into Android apps, and up- 
dating the Android SDK. The transition 
from Ant to Gradle as the build system 
a inthe Android SDK posed a significant chal- 
FIG Processing editor with text “Building Android lenge. Since the Android mode origi- 
014-03 project...” nally used Ant, and Google removed Ant 
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support from the SDK a few months ago, Processing for Android became incompatible 
with the latest versions of Android. Fortunately, Rupak was able to integrate Gradle 
tooling into the Android mode, which allowed us to move forward. 

Sara, with mentorship from Gottfried Haider, complemented Rupak’s work 
by creating a fully featured VR audio visualization that demonstrates what is possible 
with the new VR support in Processing for Android. Sara's VR Audioscape app com- 
bines FFT algorithms for real-time audio analysis with generative landscapes that rep- 
resent the music track currently played on the device. All the source is available on 
GitHub for those interested in learning more about the techniques she applied in this 
project. 

As Processing for Android marches into 2018 with exciting new possibilities, we 
invite you to explore creative and unexpected uses of our little pocket computers! 
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PRO NewProcessing.org, 2021, 
015 Design Systems International. 
In time for the 20th anniversary of @ProcessingOrg, we are releasing a new 
visual identity for the Processing Foundation and its projects, and a new Proc- 
essing website. lis $ a quick look behind the scenes of our newest project. 
a Fecndstch wy Anew identity needs to support the 
existing community, while amplifying 
the message of accessibility. We speak to 
this in a language already set by Pro- 
cessing itself: a blend of art, play, and tech- 
nology that’s extremely friendly to new 
coders and familiar to longtime fans. 
True to the spirit of the foundation, 
the visual identity is programmatic 
rather than static, andis centered around a 
program to derive logos from a set of 
simple rules: Draw three lines or curves in 
mm) the intersections of an 8x8 grid. 
The sea of potential logos turn into 
Rorschach inkblots eliciting every- 
thing from wiggly mascots to minimalist 
polygons. The logo system has the 
capability to produce endless icons across 
the foundation, be it logos for future 
projects, educational materials, or mer- 
~ chandise. 
\ The logo family honors the history 
_ of the organization while bringing it up 
to date for its newest set of co-producers. 
With the grid as an invisible, unifying 
background, each project has its own rec- 
ognizable identity without forgoing 
visual continuity. 
Inthe Processing Foundation 


FIG Laptops with Processing 
015-01 logo stickers. 


FIG Tote bags with Processing 
015-02 graphics. 


FIG Buttons with Processing : ; 
015-03 logos. logo, one long squiggle connects two verti- 


callines in a purple hug. The logo puts across the spirit of collaboration and know- 
ledge sharing across backgrounds, identities, and generations. 
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The Processing logo balances legacy anda 
forward-thinking vision by reviving its 
former P logo with subtle tension and play- 
: fulness brought on by projecting it on- 
y ~ ¥ ty yf >) to the grid. 
¥ The Processing Android logo us- 
es thelogo program to drawa visual connec- 
tion with the classic Android character. 
The Processing Python logo draws 
resemblance to a snake, loosely ref- 
AN NY ¢OL Ont ah erencing the classic mirroring snakes in 
WOM OL ENYR the Pythonlogo. 
SOAP ALSFSYA _ Space Grotesk, an open-source 
CY oe bs cP 1 df a aes ee take a type- : 
wy" « ace designed for writing code, is use 
=e : ve aban Ks throughout visual language. Space 
me v4 o Grotesk was designed by the wonderful 
FIG Gridof variety of Processing folks at @florian_karsten / http://inst 


Processing 


FIG Vector diagram of Processing 
015-04 logo formation. 


015-05 logo forms. agram.com/floriankarsten 

AMS YPrr kh WR FN The Processing website is 

VSR aA ' toy a a 
Bove ot ithosts example projects, tutorials 

xO i << - eee Wi ™ teaching materials, and reference library. 

iS af : «Bilas Ni aT Y s§) We redesigned the website from the 

y yy" aS / Dy ground-up and did a complete overhaul of 


the content with the help of communi- 
ty volunteers. 

Users are greeted with an inter- 
active version of the logo program, project- 
ing the same idea as that of Proces- 

¥ y? a" ¢ sing: technology is not merely passively 
received, but something everyone 
Shpares aaa peeees8_ should be able to shape. 
We unsheathed example sketch- 
Fig. iPraeadsingiroundation, Prawessiny: es from behind their text descriptions and 
015-07 Processing Android, Processing Python logos Drought them to the Processing home- 
with various curves. page. Visitors can click on each visual to 


M4 van Rew wae » 
FIG Two mugs with Processing 
015-06 graphic forms. 
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Foundation 
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Pree 
Processing 
2 —_ 


FIG Decorative pattern with 
015-08 curves and logos. 


a 


Processing 
Foundation 


FIG Processing Foundation logo, three lines 
015-09 interweaving like a plant. 


Processing 


FIG Processing logo, three curves 
015-10 forming aP. 
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view its interactive sketch and the code 
behind it. The result is image-for- 
ward, true to the software. 

We improved both the acces- 
sibility and functionality of the reference 
pages by introducing a vertical layout 
with brief descriptions. A new sidebar with 
search makes it easy to navigate bet- 
ween pages and related examples demon- 
strate how to use the code in practice. 

This project brings the Processing 
Foundation’s ethos of accessibility to 
the forefront of its entire visual identity. We 
hope the new logo program, visual 
identity, and Processing website serve as a 
sincere thank you and a solid 
preparation for its next 20 years of growth. 

We would like to thank @reas, 
@ben_fry, and the rest of @ProcessingOrg 
for trusting us with this project. We 
are always on the lookout for new collabo- 
rations, so get in touch if this project 
has piqued your interest! 
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FIG Screenshot of processing website with 
015-14 newlogo. 


PD Presa toetat sour tay Tek tt 


FIG Processing Android logo, three curves 
015-11 forming A shape. 


FIG Processing website showing logo builder 
015-15 interface. 


Processing = = Els 


Sructure 8 
Python a 
Ir 
| 1 LE 3 eq 
FIG Procesing Python logo, three curves forming L 


015-12 snake shape. 


FIG Processing examples 
015-16 pages. 


M Anni ersary 
Community 


\ Celebration! 


FIG Series of PCD 
015-13 2021 posters. 
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FIG Processing reference 
015-17 page. 
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FIG Processing application 
015-18 loading on laptop. 
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Initiated by Lauren Lee McCarthy in 2013 and developed by 
an international community of contributors, p5.js is a 
JavaScript library that aims to make creative expression and 
coding on the web accessible and inclusive. It uses the 
metaphor of “sketching with code”, drawing inspiration from 
its precursor, Processing. p5.js is free and open-source 
because we believe software, and the tools to learn it, should 
be accessible to everyone. p5.)s is a community of, and 

in solidarity with, people from every gender identity and ex- 
pression, sexual orientation, race, ethnicity, language, 
neuro-type, size, disability, class, religion, culture, subculture, 
political opinion, age, skill level, occupation, and back- 
ground. We facilitate and foster access and empowerment. 
We are all learners. 
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P5* ‘First p5.js Contributors Conference, 
001 2015. 
p5.js Contributors Conference 2015, May 25-31, 2015, Hosted by Frank-Ratchye 
ae DIO for Creative Inquiry, Carnegie Mellon University, Pittsburgh, PA. 
+ A group of approximately 30 partic- 
ipants spent a week at the Frank- 
Ratchye STUDIO for Creative Inquiry at Car- 
~ negie Mellon University in Pittsburgh, 
advancing the code, documentation, and 
community outreach tools of the pd. 
js programming environment. Participants 
~~ came from as far away as Hong Kong, 
FIG Adiverse group of participants efile and make ¢ Seattle, Los Angeles, Boston, and New 
001-01 the p5 sign with their hands. York. Most were working profession- 
TS ea alsin the fields of creative technology, inter- 
action design, and new media arts, but 
the group also included a half dozen under- 
graduate and graduate students from 
Carnegie Mellon's School of Art. 
Alongside technical develop- 
ment, one of the main focuses of this con- 
ference was outreach, community, 
and diversity. The conference began with 
a panel—Diversity: Seven Voices on 
FIG Aperson presenting the p5.js community Race, Gender, Ability & Class for FLOSS 
BUDD E el atesnien ROMIMIEI BUOY: and the Internet (http://studioforcrea 
r a j tiveinquiry.org/events/diversity-seven-voi 
ces-on-race-gender-ability-class-for- 
floss-and-the-internet). Organized by Joh- 
anna Hedva and Lauren Lee McCarthy, 
the panel took place Tuesday, 25 May 2015 
in Kresge Auditorium at Carnegie Mell- 
son University. Speakers included Maya Man, 
Casey Reas, Johanna Hedva, Stepha- 
nie Pi, Phoenix Perry, Taeyoon Choi, Sara 
FIG Awhiteboard with different colored sticky and Hendren, Epic Jefferson, and Chand- 
001-03 written notes about programming. ler McWilliams. 
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Participants included Jason Alderman, 
Sepand Ansari, Tega Brain, Emily 

Chen, Andres Colubri, Luca Damasco, 
Guy de Bree, Christine de Carteret, 

Xy Feng, Sarah Groff-Palermo, Chris Hall- 
berg, Val Head, Johanna Hedva, Kate 
Hollenbach, Jennifer Jacobs, Epic Jeffer- 
son, Michelle Partogi, Sam Lavigne, 
Golan Levin, Cici Liu, Maya Man, Lauren 
Lee McCarthy, David Newbury, Pao- 

lo Pedercini, Luisa Pereira, Miles Peyton, 
Caroline Record, Berenger Recoules, 
Stephanie Pi, Jason Sigal, Kevin Siwoff, 
Charlotte Stiles. 


FIG Participants attentively smile and listen toa 
001-04 presentation. 


FIG Woman speaks at a podium in an auditorium 
001-05 while three participants sit on the stage 
and another three are Skyping in on the screen. 


FIG Five people in a circle with their laptops 
001-06 sharing their notes. 
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p5.js Community 
Statement, 2015. 


»o 


po.Js 


Community 


1p 5,js Community Statement 


r : 
p5,js is a community interested in exploring the creation of art and design 
‘4 with technology. 


#BlackLivesMatter (because of cours: 


FIG 
002-01 


We are a community of, and in solidarity with, people from every gender 
identity and expression, sexual orientation, race, ethnicity, language, 
n, culture, subculture, political 


© In nractice: 


Ascreenshot of the p5.js Community 


b+ OOM 


_,° During the first p5.js Contributors Confer- 


ence in 2015, we worked throughout the 
» week to draft the p5.js Community State- 
ment. The process incorporated ideas 
from all the individuals present, as well as 
, other community members who partici- 
pated online. The p5.js Community State- 
ment has guided us through the years, 
shaping project decisions around design, 
_ code, documentation, language, teach- 
* ing, organizing, and outreach. 
p5,js is a community interested 
in exploring the creation of art and design 
with technology. We are a community 
of, and in solidarity with, people from every 


Statement has black and pink text overa white gender identity and expression, sexual 


background. 


orientation,race, ethnicity, language, neuro- 


type, size, disability, class, religion, culture, subculture, political opinion, age, skill 

level, occupation, and background. We acknowledge that not everyone has the time, 
financial means, or capacity to actively participate, but we recognize and encour- 

age involvement of all kinds. We facilitate and foster access and empowerment. We are 
all learners. 
We like these hashtags: #noCodeSnobs (because we value community over 
efficiency), #newKidLove (because we all started somewhere), #unassumeCore 
(because we don’t assume knowledge), and #BlackLivesMatter (because of course). 


In practice 


-We are not code snobs. We do not assume knowledge or imply there are things that 
somebody should know. 

We insist on actively engaging with requests for feedback regardless of their complexity. 

«We welcome newcomers and prioritize the education of others. We strive to ap- 
proach all tasks with the enthusiasm of anewcomer. Because we believe that newcom- 
ers are just as valuable in this effort as experts. 

-We consistently make the effort to actively recognize and validate multiple types of 
contributions. 

-We are always willing to offer help or guidance. 


P5.JS 
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In times of conflict 
We listen. 
-We clearly communicate while acknowledging others’ feelings. 


«We admit when we're wrong, apologize, and accept responsibility for our actions. 


«We are continuously seeking to improve ourselves and our community. 
-We keep our community respectful and open. 
«We make everyone feel heard. 
*We are mindful and kind in our interactions. 
In the future 
-The future is now. 
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P5* —_pd.js Friendly Error 
003 System, 2015-ongoing. 
aut te connate 5 ey 3 The first version of the p5.js Friendly Error 


Instevetions te move te anne 


ie Mees diog fom tH ire J System (FES) was conceived and proto- 
YS 


You 4hink yeu moved the movse 


| typed at the first p5.js Contributors Confer- 
ence in 2015. The idea was to make 
yy) the highly technical and often opaque error 
a3 messages reported in the console more 
Wy understandable to people using p5.js. The 
a Friendly Error System would use simpler 
language, identify common errors, suggest 
including Jason Alderman, Tega Brain, changes to get the code working, and 


Taeyoon Choi and Luisa Pereira. direct the user to documentation to learn 


Hand-drawn comic showing a mouse movinga more about the functions they’re trying 
shaded circle. touse. 


FIG Image from the Field Guide to Debugging 
003-01 created by the Education Working Group, 


Jess Klein and Atul Varma ex- 
panded on this work in their fellowship proj- 
ect in 2016, using human-centered de- 
sign principles to create more tools to help 
* beginners get started with p5.js. 

Alice M. Chung, mentored by Luisa 
Pereira, further developed the FES dur- 
ing Google Summer of Code in 2017. Alice 
gives an overview of the system below, 
excerpted from their project wrap-up es- 


FIG Emily Chen presenting learnings from the ' i 7 
003-02 PyLadies community at the p5.js Contributors Say (https://medium.com/processing- 


Conference. foundation/2017-marks-the-processing- 


Woman sits with laptop in front of group and projection foundations-sixth-year-participating- 
that reads “Don’t assume we all should know X.” in-google-summer-of-code-d365f621c4 
Te there a chart sonovhece thet shew all the scp vanes? OG) PUDlished on Medium. 
e ening. The voice of a debugger will have 
vce eee" an impact on new developers’ first im- 
“Cot MES oy eh cl Semesy sees sate os sven ses pression and following coding experience. 
whe cure abd coses issn come tie soasenaeae = This is why designing a friendly debug- 
Fig: Jeseiklain:beutwninigns ienotes ger and error system is essential for proj- 
003-03 Text notes identifying tricky parts of starting ects with an outreach mission such 
with p5jjs. as Processing and p5.js. Having a well- 
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designed debugger written in the right tone can lower the barrier for inexperi- 
enced users. 

p5.js’s new feature, the Friendly Error System (FES), was developed with this 
idea in mind. Starting from examining language-specific common error cases, 
we developed FES which creates console messages that can hint at the debugging 
solution rather than throw an error and exit. JavaScript often allows “silent fail- 
ures,” meaning the code will fail to execute the expected behavior without a warning 
(i.e., error messages) from the debugger. For example, JavaScript doesn’t sup- 
port type checking by default, making errors in parameter entry harder to detect for 
new JavaScript developers. 

So far, FES is able to detect and print messages for two kinds of errors: (1) val- 
idateParameters() checks a function’s input parameters to confirm it matches 
the inline documentation, and (2) friendlyFileLoadError() catches file loading errors. 
We have integrated these two kinds of error checking to a selected set of pd 
functions, but developers can add them to more pd functions, or their own libraries, 
by calling the above FES functions. FES provides a generalized error message 
generation system, so more error types can be implemented in the future. 

To help beginners without requiring additional setup, FES is enabled by 
default in p5,js. In p5.min,js, it is completely disabled for efficiency. We understand 
that having an assistant system like FES can be counter-productive, and itis 
possible to easily disable FES by setting p5.disableFriendlyErrors = true. 

Here are a few examples of the Friendly Error System in action, com- 
piled by Alice: 

File Load Errors 

ea Here is a simple scenario where I’m trying 
to stylize text using a font file, and the 
output fails to render the text in the desired 
style. In addition to JavaScript error mes- 
sages, friendlyFileLoadError gener- 
ates a message in the console: 

> p5.js says: It looks like there was a 
problem loading your font. Try checking 
if the file path [assets/OpenSans-Regular. 
FIG Screenshot of p5.js editor, friendly error ttf] iS correct, hosting the font online, ws 
003-04 message notifies theuser the wrongnumber Unning a local server [https://github.com/ 

of arguments may have been entered. processing/p5.js/wiki/Local-server]. 


pP5js @ = 
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The message first provides a short error case summary, and then displays the given 
path that seems to be incorrect and causing the problem. Lastly, it provides additional 
resources that may guide the users to a correct solution. This kind of file loading FES is 
currently implemented for the loadlmage(), loadFont(), and loadTable() functions. 

Missing Parameters 

eas ~ Here, I’m trying to draw an arc, but with 

anumber of parameters less than the re- 
quired. This is the silent error case that 
was discussed above, and thus no error 
from JavaScript. In the console, FES 
generates two messages, one for each 
missing parameters: 

> p5.js says: It looks like arc() re- 
ceived an empty variable in spot 4. 


psjs @ = & 


FIG Screenshot of p5.js editor, friendly error lf not intentional, this is often a problem 
003-05 message notifies the user therewasanerror With scope: [https://p5js.org/exam- 
loading font. ples/data-variable-scope.html]. [http:// 


p5js.org/reference/#p5/arc] 

> p5.js says: It looks like arc() received an empty variable in spot 5. If not intentional, 
this is often a problem with scope: [https://p5js.org/examples/data-variable- 
scope.html]. [http://p5js.org/reference/#p5/arc] 

Similar to file loading error messages, the FES first provides a short error 
case summary with a location, and then provides additional resources that may be use- 
ful for debugging. 

Wrong Parameter Type 


- Inasimilar vein, FES also checks parame- 
ter types. In this scenario, I’m trying to 

* draw an arc but gave the wrong parameter 
type String instead of the required 
parameter type Number. FES generates a 

- | message summarizing this with a link 

to the function's documentation: 

> p5.js says: arc() was expect- 
ing Number for parameter 0, received string 


FIG _p5,s Editor friendly errorflags arc has wrong instead. [http://p5js.org/reference/ 
003-06 parameter. #p5/arc] 
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Object Parameters and Multiple Parameter Formats (with an example for 

developers) 

FES not only supports type checking for JavaScript’s default types (Boolean, String, 
Number, Array, and undefined) but checks the object’s name parameter. 

Akshay Padte, mentored by Stalgia Grigg, added further improvements during 
Google Summer of Code in 2020. Excerpts from Akshay’s project wrap-up essay 
(https://medium.com/processing-foundation/extending-the-p5-js-friendly-error-sys 
tem-8af80dd2d314) published on Medium are included below. 

The first improvement was to add a spellcheck kind of system to the FES. Begin- 
ners often need time to understand the various naming conventions commonly 
used in programming, such as camelCase for identifiers, CAPS for constants, etc. And 
So, capitalization and spelling mistakes are very common, such as writing create 
canvas() instead of createCanvas(), colour() instead of color(), etc. These kinds of mis- 
takes are easier to resolve, as the browser would display an error pointing to the 
function call. 

But if someone misspells a p5 entry point function (which has to be defined 
by the user), such as by defining preload() as preLoad()—which | learned is a very com- 
mon mistake—p5 won't be able to detect it and the sketch would fail silently, and it 
may take a lot of time to debug this simple mistake. 

Here are a few example messages from this feature: 

The second new feature was Global Error 
psi says seems that you may have accident writen pretoadinsteadorpreoas. Catching, This meant analyzing the 
ince aa el le a aaal errors thrown by the browser and trying to 
match them up with helpful explana- 


p5js says: It seems that you may have accidently written Setup instead of setup. 


Please correct it if it's not intentional. (http://p5js.org/reference/#/p5/setup) 


tions to solve them. 
FIG Examples of p5.js FES To classify the errors, it was 
003-07 messages. settled to use a regex match against a pre- 


built lookup table. The idea was based on the fact that web browsers use template 
error strings to generate error messages. This means that for a given browser, all error 
messages of a particular kind would have a consistent structure. We can have our 
own template strings with placeholders, which are then replaced with regex matching 
sequences (like ([a-zA-Z0-9_]+)), and then the result is matched against the error 
message to detect what kind of error this is. The regex sequence also helps to extract 
relevant details. For example, take a look at this sketch: 

function setup() { 

let a=5; 
} 
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function draw() { 
let b=a+95; 


It shows a very basic mistake with scope that a beginner can make. The error shown is: 
While the browser error message aims 
at being concise, the FES message aims to 
De eae explain the error as much as possible, 
cuvritenydiaintecrensepe(niesiowens). — aNd also provides links that have examples 
i iia ahaa to fix this kind of error. This is more help- 
conergeiteeror te cnunimitiniwenseay _ tUl to those who have just started learning to 
program and have not yet gotten used 

FIG —_p5.js FES flags undefined to deciphering error messages. 
003-08 variable. Another distinction to be made 
was between errors in user-space and errors that happened inside the library. These 
could be differentiated by seeing their stack trace. Moreover, it’s possible to sim- 
plify the stack trace itself to only include user-defined functions. 

Here’s an example of an error that happens in library space: 


Error shown by the Browser 


(ova 
For more 
hetps://p5js.01 
https//devel 


audiences The FES filters out all the internal details 
i aia from the stack trace, making it easier 
a to understand. 
eae Shantanu Kaushi, mentored 


ororsnisoge ond stinisir comenseemesssey — LY Thales Grilo and Luis Morales-Navarro, 

cet added new features during Google 

Summer of Code in 2021. Excerpts from 

Shantanu’s project wrap-up report 

FIG —_p5js FES filters out stack trace are included below. 

003-09 messages. FES’s fesErrorMonitor has a list of 
etup errors that it detects. My work was to 

extend this list, enable fesErrorMonitor to 

: detect more commonly seen errors, 

=F Ge Pohcate hatch unease angeno dined Naan pleat. 

003-10 “p5.js says: You have used a pd5.js ae : ladded a new feature to FES to 

vatiable ‘PI’ make sure you change the detect the redeclaration of p5.js’s reserved 

variable name to something else,” followed byalinkto variables and functions. If a user ac- 

the relevant page in the reference library. cidentally redefines a p5.js reserved con- 

stant/function, it can cause problems and create confusion. The new redeclaration 

detection feature tackles this problem. 
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P5* ~—_pd.js Accessibility Project, 
004  2017-ongoing. 
The p5,js accessibility is an ongoing project that began in 2017, with many 
people contributing their perspectives through testing, design, development, 
and documentation. Included below are excerpts from project write-ups 
from three key contributors to the project. 
p5 Accessibility, By Claire 
Kearney-Volpe, Originally posted 
onthe Processing Founda- 
tion Medium 1 December 2017. 
Over the last two years, a small com- 
munity has been growing and working on 
a the accessibility of p5.js. At its core, 
ipants. ane - 2 F 
ood-01 a cannh sroudatabiewitn the pS Accessibility project is a community- 
laptops in front of them. They discuss andtrya based attempt to make p5.js andits 
coding exercise. learning resources accessible to people 
that are blind or have low vision. The Processing Foundation has supported the 
work, which relies on a broad network of both sighted and blind experts and end-users. 
The project started where | work at NYU’s Ability Project, an interdisciplinary re- 
search and development space. In this studio, our faculty and student teams dev- 
elop assistive and rehab technologies based on the premise that these technologies 
serve people best when they participate in its design. People from the community 
tell us their ideas for technological interventions, and we work with them to develop sol- 
utions. Although physically based in the Tandon School of Engineering, students 
from across NYU (engineering, occupational therapy, and design students) collaborate 
with end-users to develop assistive and rehab technologies. 
One of these projects was a collaboration between Chancey Fleet and |, a blind 
technology expert and educator who works at a New York Public Library. Toge- 
ther, we worked to develop a diagramming tool that would allow her to plan a banquet, and 
save and share her plans digitally. The project ended up being a bit of a disaster. 
Not only did we need to program a sonified, touch-screen, web application as 
coding novices, we also struggled to find cohesive, newbie-friendly documentation 
of accessible development practices. For me, there was also the challenge of learning 
how Chancey used her computer and cellphone. Many people who are blind, Chan- 
cey included, use screen readers with synthesized voices or braille displays that relay in- 
formation about the content on their screens. Screen readers, it turns out, are not 
that easy to use (although worth a try). 
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Screen Readers 


In addition to being in unfamiliar territory, 
_ another factor impeded our progress. 
If the prototyping process was to be truly 
ee participatory, Chancey needed to brush 
* Speech synthesis ((( )) up onJavaScript and HTML. We looked into 
the plethora of code-learning resour- 
ces online and found that most were inac- 
cessible to her screen reader. Even 
° Braille display the “good” ones, the ones that teams of 
ee very smart people had worked hard 
to make accessible, remained unfriendly 
it 02 cee a ie of speech and cumbersoimeapUsetierallse 

Shee ad braille outputs. Sound ee although their lesson descriptions oo 
coming from a monitor indicate speech synthesis, anda accessible, their videos, edit fields, 
small, red refreshable braille display is used as an or screenshots of code snippets were not. 
example of screen reader outputting to braille. The lack of good documentation 
around accessible development practices and the lack of accessible code-learning re- 
sources slowed us down and frustrated us to the point that the project was stopped 
halfway. Although our banquet diagramming app was never fully realized, from this work 
emerged asense of immediacy around accessible code learning. 

Our solution was to combine the design challenges into one mega project. We 
approached the Processing Foundation, and they accepted our application to their 
2016 fellowship program. The Processing Foundation’s mission — to “promote software 
literacy” and “empower people of all interests and backgrounds to learn how to 
program and make creative work with code” — aligned nicely with the project goals. 

We began the project with input from experts and focus groups that have 
facilitated a redesign of the p5.js learning resources and web-based code editor to en- 
sure that they are accessible to people with low vision and blindness. 

Expert Interviews: 

We interviewed five professional HCI (Human Computer Interaction) researchers 

and developers with special interest in accessibility for people with visual impairments. 
Each of these stakeholders have visual impairments themselves, and offered great 
insights into the issues of this type of undertaking and examples of previous attempts. 

Focus Groups and Code Learning Workshops: 

We held five workshops in which people with visual impairments came and learned web 
development and also tested our p5.js web-editor prototypes as they have devel- 
oped with feedback. 
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FIG Student volunteer and participant during 
004-03 workshop. 

Smiling student volunteer and participant sit 
at adesk with laptops in front of them. 


FIG Participants check on each others’ work 
004-04 during coding exercises. 

Claire stands behind three workshop partici- 
pants sitting at a table with laptops in front of them. 


Text Output 


FIG Visual example of text and table outputs of a 
004-05 simple sketch with animation. 

Animated gif showing text and table outputs of 
asimple sketch with animation. Updating text and 
tabular data reads the position and size of ellipses ina 
canvas on the bottom left of the screen. A red ellipse is 
at the top left of the canvas and green and blue ellipses 
bounce vertically from top to bottom of the canvas. 
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Implementation: 
Led by Mathura Govindarajan, Luis 


» Morales-Navarro, and Cassie Tarakajian, 


we have been continually developing 

the accessibility of the p5 development 
environment (IDE) and its user inter- 

face elements/interactions across a var- 
iety of browsers, operating systems, 

and assistive technologies (AT). The out- 
puts of pd sketches have been a part- 
icular challenge to convey in an accessible 
format. As canvas elements are impe- 
netrable by screen readers (the only HTML5 
element that is), we worked on creating a 


“Shadow DOM’ that dynamically interprets 


the visual and spatial outputs on screen. 
Our Shadow DOM outputs are hidden but 
accessible to screen readers. 

The three outputs that we have dev- 
eloped are 1) accessible text (English 


a” language description), 2) tabular (in a table 


format), or 3) tonally based (panning 
and frequency used to convey position and 
speed) descriptions of the visual con- 
tent on the canvas. In their current state, the 
accessible outputs handle fairly simple 
sketches and can be activated in p5’s web- 
based IDE’s Preferences menu. 

We have also created a high con- 
trast mode for the IDE and developed 
our own “Color Namer’” which translates 
RGB values to color descriptions. With 
the assistance of Lauren McCarthy, we’ve 
worked onan audit and remediation of 
p5’'s resource website accessibility. This 
small but dedicated team is currently 
working on making an accessible widget 
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for the editor, so that it can be embedded 
in online lessons and tested with high 


school students. 
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Making p5.js Accessible, By Luis Morales-Navarro and Mathura Govinda- 

rajan. Originally posted on the Processing Foundation Medium 12 April 2018. 
When we started working on the p5.js accessibility project the premise had been 
set: We were going to make the pd.js web editor accessible to people with visual impair- 
ments. Claire Kearney-Volpe’s 2016 Processing Fellowship project began a conver- 
sation about the role the Processing Foundation should play in making its resources and 
learning tools accessible. What we mean by accessible is making the editor and p5.js 
resources usable with screen readers, and also making sure that the canvas is available 
in the form of text and sound. You can read more about how this project began 
here (https: //medium.com/processing-foundation/p5-accessibility-115d84535fa8). 
Although we joined the project in late 2016, and are now working on it as a 2018 
Fellowship project (with Claire as our mentor), we think of it as something that goes be- 
yond Claire’s and our fellowships, and ideally will be sustained as an integral part 
of the development of p5.js. 

Together with Claire, 2017 PF Fellow Cassie Tarakajian (https://github.com/ 
catarak), and in collaboration with community members, we have been working on the 
implementation of a high-contrast theme for the editor, text and table outputs for 
screen readers, and a sound output that visualizes movement. These developments 


colornamer 
FIG p5 accessibility-specific software work. 
004-06 Screenshot of high-contrast editor mode, 
screenshot of p5 website, and color 
namer logo. 
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led to the creation of p5.accessibility.js (nttps://github.com/processing/p5.accessibil- 
ity), a library that makes the p5.js canvas accessible to screen readers. As we make 

the library more robust and focus on creating accessible-for-all learning resources, it is 
a good time to reflect on what we have learned so far from the p5.accessibility.js 
project, what we plan to do in the future, and why making p5 accessible is important. 

Why is it important to make p5 accessible? 

When we talk about “coding for all” and “coding literacy,” people who are visually im- 
paired are most of the time left out [1]. Tools for programming have limited acces- 
sibility features and are generally directed toward computer science curricula. Accessi- 
ble learning resources are also limited, with examples being displayed through 
screenshots or videos that are not screen-reader friendly. Similarly, in code editors 
most of the feedback is visual and cannot be understood through screen readers. 

Because almost all of our communications are now mediated through comput- 
ers, understanding computational media and computational thinking is essential, 
and the concept of coding literacy is more important and popular than ever before. Cod- 
ing literacy is a gateway for thinking about the role code and computing play in our 
everyday lives and how code shapes the way we communicate [2]. Processing, the moth- 
er of p5, was created with the dual aims of demystifying programming and of ap- 
proaching coding as a creative and exploratory process that should be accessible to 
all; p5.js continues these intentions. 

Although this approach makes computational thinking accessible to more people, 
the visual nature of p5.js reduces its accessibility. Learners with visual impairments 
can express themselves visually and should be able to use p5 to engage with computa- 
tional thinking. p5 makes text-based programming easier for beginners by allowing 
them to code in and for the browser; as Daniel Shiffman says, p5 “is great for actually do- 
ing stuff, but for learning, it’s terrific” [3]. We think of p5 as a learning platform, which 
is why the development of p5.accessibility.js focuses on pd for beginners. 

Because of the lack of accessible learning resources, programming for learn- 
ers who are visually impaired relies heavily on “self-taught” efforts [4], which forces them 
to seek support in online communities. Such communities, of the kind that Proces- 
sing and p5 both nurture, are important because they provide support for learners in the 
form of online resources, forums, and tutorials, and challenge them to continue ex- 
perimenting with their code [5]. As Andrea A. DiSessa writes in Changing Minds: Com- 
puters, Learning, and Literacy, “The more acommunity knows about something, 
the easier it is for each member to learn” [6]. Making our communities accessible can 
provide new learners who are visually impaired and “self-taught” learners with 
a vast network of resources, experiences, and access to the knowledge of others. 
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p5-accessibility.js 
In August of last year we realized that making only the p5.js editor accessible wasn’t 
enough, since everyone should have the ability to access p5.js sketches outside the edi- 
tor. This became even more important when thinking about current learning resour- 
ces available among the p5.js community. We attempted to adapt the interceptor created 
for the editor so that it could be used in the p5.js widget. Through this process we 
realized that the best approach was to create a library that could bring the accessibility 
features of the editor to any p5.js canvas.The accessibility library takes an “ability- 
based design approach” [7], which considers how systems can be designed to fit the 
abilities of whoever uses them, by providing different ways of exploring the canvas. 
Itis not about providing a one-size-fits-all solution but about having an array of options 
that makes p5.js more usable for everyone, including but not limited to people with 
visual impairments and older users. Adding the library is easy and simple without requir- 
ing knowledge of object-oriented programming and allows users to choose which 
outputs they want to make available. 

Challenges 

Canvas 
Trying to make the p5.js web editor and p5.js sketches accessible came with its own 
set of challenges, the main one being that the canvas is probably the single, most inac- 
cessible element in HTML. While it’s possible for a screen reader to recognize the 
element, it cannot identify all of the elements on it. The reason for this is simple: the can- 
vas behaves just like a physical canvas, once you put paint on it, it covers up what’s 
behind it. It’s easy to see the color of each pixel but not understand how the pixels com- 
prise shapes and elements. This poses a problem when you are trying to describe 
the elements on the canvas through code. To help solve this problem, Atul Varma intro- 
duced us to the concept of monkey patching (https://en.wikipedia.org/wiki/Monk 
ey_patch). Monkey patching is essentially a way to piggyback existing code and add add- 
itional “features” to it. We added some code to the editor to make it work along with 
the library. When a p5 function is called, this code runs before the actual p5 function and 
makes a local copy of the parameters that the user passed into the function and the 
function itself. This, paired with the p5 function documentation, gave us a vast amount of 
information. For example, when a user types ellipse(50,50,20,20), the monkey-patch 
code will first look at this function and understand that the user is calling the function el- 
lipse with the arguments 50,50,20,20. It will then look up this function in the docu- 
mentation (https://github.com/processing/p5.js/blob/master/src/core/2d_primitives. 
js#L141) of p5.js to extrapolate that the user wants to draw an ellipse at coordi- 
nates(50,50) of height 20 and width 20. This information is stored locally and displayed 
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onthe web editor in an accessible fashion (https://medium.com/processing-foundati 
on/p5-accessibility-115d84535fa8#96ea), meaning that the visual canvas is bro- 
ken down into text or sound and these descriptions can be made available to the user. 
This basic concept of monkey patching has slowly extended to include more de- 

tails about the canvas such as: What color is an ellipse? Which corner of the canvas is it 
closer to? What percentage of the canvas does it occupy? 

Once we had a substantial structure set up on the editor to be able to provide ac- 
cessible outputs, the main issue was making sure that screen readers were compat- 
ible with the code editor. The most widely used screen readers today are VoiceOver (free 
with MacOS), JAWS (paid software for Windows), and NVDA (open-source software 
for Windows). While they all strive to be the best possible available software, due to the 
speed of software development cycles, they fail to keep up with the latest updates 
of web browsers. This means that we found ourselves in a place where we had to choose 
the “most compatible” code editor for all screen readers. After exploring the op- 
tions with help from Cassie, we settled on using codeMirror (http://codemirror.net/). We 
still had the issue that certain features are not supported in some screen readers 
and browser combinations. (At the time, Edge had just been released, and they had open- 
ly announced that they did not support screen readers.) To avoid further confusion, 
we conducted a series of tests and settled on supporting the following browser + OS + 
screen reader combinations: 

- Safari + VoiceOver in OSX 
*NVDA + Firefox in Windows 
- JAWS + Chrome in Windows 

Colors 
Out of all the issues we faced, the one that gave us the most laughs was colors. From the 
monkey-patch code, we'd get hex values or RGB values of colors and have to con- 
vert these values to names. While there are ample JavaScript libraries across the inter- 
net that do this, most of them include color names like “lazarin crimson,” “bermuda 
gray,” or “tickle-me pink.” These names are entertaining, but not very helpful. A text out- 
put should not only be readable but also understandable [8]. We were looking for 
a library that gave us easy-to-understand color names — names like those of crayon col- 
ors we used growing up. We didn’t find one so we decided to make it ourselves. We 
developed colornamer (https://www.npmjs.com/package/colornamer), a simple NPM 
module/JavaScript library that, when given a hex or RGB value, returns color names 
that are accessible to people who are blind or visually impaired. 

Earlier this year, Claire and Scott Fitzgerald used the library in their program- 
ming classes with high school students who are blind at the Oysters and Pearls Tech 
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Camp, alearning center that integrates technology and science in schools that are inclu- 
sive to people who are blind. The results were promising. One student who is able to 

see colors at a short distance could not stop laughing when the color names the screen 
reader gave matched the colors he was able to see. For example, when combining 

red, green, and blue color values for the first time, he created and enjoyed the color “sal- 
mon pink.” 

What’s next? 

From its inception, the role of the community has been crucial in our decisions and 

in the design and refining of the tools. We continue to talk to community members, and 
blind and visually impaired experts who work with programming, to better under- 
stand the challenges we face and arrive at solutions together. 

We're currently entering a phase of heavy testing to make sure that p5.acces- 
sibility.js is robust and fully integrated into the web editor. We are also working on mak- 
ing existing p5 learning resources accessible in order to make the Processing and 
p5 communities more inclusive. Our aim is to create a comprehensive collection of learn- 
ing resources that users who have visual impairments can engage with. 

We are grateful to assistive technology experts Chancey Fleet, Sina Bahram, and 
Josh Miele for their support, and to Cassie Tarakajian for the development of the 
p5.js web editor and working with us to make it more accessible. We are thankful to Atul 
Varma, Daniel Shiffman, Luisa Pereira-Hors, Scott Fitzgerald, and Johanna Hedva 
for their input. This project was born out of an initiative at the NYU Ability Project and is 
supported by a 2018 Processing Foundation Fellowship. 
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Accessibility Improvements for the p5.js Web Editor, By Cassie Tarakajian, 
Originally posted on the Processing Foundation Medium 12 June 2020. 
The p5.js Web Editor (https://editor.p5js.org/) is a widely used open-source project with 
200,000 active users a month. As the lead maintainer, | juggle many different tasks 
and priorities, and | organize my work by balancing maintenance tasks, such as respond- 
ing to and organizing GitHub issues and projects, in which | focus on creating or 
improving one feature. | knew the web accessibility of the site needed some attention, 


P5.JS P5* 004 229 


and | had wanted to make the space to improve it, but it felt overwhelming because | 
thought | didn’t really know what | was doing. Fifteen percent of the world’s popu- 
lation (https://qz.com/1407450/theres-already-a-blueprint-for-a-more-accessible- 
internet/) has a disability, such as low vision, blindness, hearing impairment, and 
deafness, yet web developers aren't typically trained to think about this population — | 
certainly was not. How could | learn to improve support for a huge number of peo- 
ple who use the web editor? 
I'm inspired and humbled by the amazing work of folks in the p5.js com- 
munity who have pushed the goal of accessibility forward. This includes Luis Morales- 
Navarro and Mathura Govindarajan, Claire Kearney-Volpe, and many others. They 
have patiently explained accessible design to me: how users with low vision and blind- 
ness should have an equally robust experience as sighted users, and how acces- 
sibility features should be on by default. | am also grateful for a grant from the Clinic for 
ee Source Arts (COSA) (https://www.du.edu/ahss/opensourcearts/) at Denver 
......-e University, which allowed me to focus spe- 
~. Cifically on accessibility. 
F The Web Content Accessibility 
Cuil Guidelines (WCAG) outline a thorough 
a standard for web content accessibility, and 
they're fairly wordy (as standards should 
be!). Luckily, to make your website accessi- 
ble, you don’t need to read the whole 
thing, as there are many tools to help you 
FIG Screenshotof the previous light theme colors align with these standards. There are 
004-07 inthe web editor. specific criteria in three different levels (A, 
se Sesame «v=seees =e AA, and AAA) to meet folks with dif- 
Des ° ferent needs, which cover different topics 
Se such as color contrast and semantic 
HTML. 
| began with updating the editor. 
es p5js.org website colors across the three dif- 
= —‘ ferent themes (light, dark, and high con- 
= trast). When teaching with the web editor, | 
had noticed that sometimes certain 
things were hard to see or read, especially 
on a projector. | used the web editor de- 
sign system created by Jerel Johnson and 


ei a 
(> a 


FIG Using a color contrast checker to update low 

004-08 contrast colors in the web editor. Notice the 
updated higher contrast. 

Contrast checker tool open in the browser. 
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“pause, 


acolor contrast Chrome extension to painstakingly go through every element on the 
page. As aside effect, it helped me reduce the number of different colors used 

in each theme, clean up the styling code, and make some small improvements to the 
non-color interface design. 

The pull request (https://github.com/processing/p5.js-web-editor/pull/1406) 
| made ended up fixing seven different open issues! It was very exciting. | even got 
to show off the crisp new colors in alivestream talk. 

Next, | decided to tackle the icons, as there are a lot in the web editor: “play,” 
”“settings” cog, and so on. | knew that | needed to give them all labels that would 
be accessible to screen readers, but | didn’t know how. | found and used “Context- 

ually Marking Up Accessible Images and SVGs" (https://www.scottohara.me/blog/201 
9/05/22/contextual-images-svgs-and-ally.html) by Scott O’Hara to guide me. 

| learned that sometimes icons convey information and need a label, and sometimes 
they are decorative and should be hidden from screen readers. 

In order to add all of the necessary attributes to the SVG icons, | had to import 
the SVGs using a new library called SVGR, which imports all of the icons as React 
| pS" | ager aera onan rae Components. As a side effect, it significant- 

ly reduced the number of network re- 
> a) Auto-refresh Cold pangotin» Quests the web editor makes when loading, 
since the icons get bundled into the 
> sketchjs JavaScript. 
FIG The arrownextto “File” is decorative, whereas Andrew Nicolaou (https://med 
004-09 the “play” icon conveys important information. ium.com/processing-foundation/features- 
p5.js editor toolbar. and-fixes-in-the-p5-js-editor-722e4b 
56495e), a Processing Foundation Fellow in 2017 and web editor contributor, had been 
working on using Storybook to build and document a component library to make 
contributing to the web editor interface easier. My changes to make the icons accessi- 
ble caused merge conflicts with this branch, so | jumped in to fix these. In the pro- 
cess, | had the realization that by building a component library, accessibility features 
could be built into components so that you could use them without needing to fully 
understand them. This led me to create a Higher-Order Component for the SVG icons, 
based on what | learned from Scott O’Hara’s post to account for decorative versus 
informational icons. 

Lastly, | wanted to improve the semantic HTML (https://develop er.mozilla. 
org/en-US/docs/Web/HT ML/Element/details), which adds meaning to your website 
content rather than change howitlooks. Screen readers rely on semantic HTML 
to work properly, and by using the right HTML elements to match the meaning of your 
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function withLabel(SvgComponent) { 
const Icon = (props) => { 
const { ‘aria-label': ardaLabel } = props; 
if (ariaLabel) { 
return (<SveConponent 
{.--props} 
aria-label=(ariaLabel} 
role="ing" 
focusable="false" 
>); 
aE 
return (<SvgComponent 
{...props} 
aria-hidden 
focusable="false” 
23 
3 


Icon.proptypes = { 
‘ania-label': PropTypes.string 
4 


Icon.defaultProps = { 
‘aria-label': null 
bb 


return Icon; 
t 


FIG Source code of React component with 
004-10 included accessibility features. 
Code in editor. 


website content, you get many web acces- 
sibility features for free. For exam- 

ple, | knew that the web editor was missing 
<main> tags, which help screen read- 

ers skip navigation links at the top of the 
page and jump to the main content 

(which is easy to do visually). | added these 
to every page, and changed many 

<div>s (which have no semantic meaning) 
to <section>s and <article>s. | even 
learned about HTML elements | had never 
used but would like to eventually, like 
<dialog> (https://developer.mozilla.org/en- 


US/docs/Web/HTML/Element/dialog), 
which contains features that I’d engineered 
into the web editor from scratch. 

There are still many accessibility im- 
provements to be mace to the web 
editor, but in only approximately 32 hours 


of work | made huge progress. The React Accessibility Guide (https://reactjs.org/ 
docs/accessibility.html) is a great place to start if you're looking to make your website 
web accessible, even if you’re not using React. Thanks to Chris Coleman and COSA 


for making this work possible! 
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P5* Diversity with Code + Art, 
005 2017-ongoing. 


ee. 


Asian women 


& gender non-conforming 


creators 


FIG Asian women and gender non-conforming 
005-01 creators website with screenshots of p5.js 


sketches. 
See Sl OE ei Se eg 
Fj a d 3 4 ee 
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‘44 d as Sone acer : 
FIG Maya Man. 
005-02 p5.js sketch with musical notes and stanza 
zigzagging. 
p5.js %¢ "eo 


FIG Xin Xin. 
005-03 p5.js sketch with grid of photos revealing 
webcam video underneath. 


P5.JS 


Diversity with Code + Art highlights diverse 
individuals amongst the art and code 
community, valuing representation and vis- 
ibility. The project was created and led 
by Chelly Jin. 

Series 1 (2017) highlighted 


Asian women and gender non-conform- 


ing artists, coders, and designers 


through a series of homepage artwork 


features and interviews. The series 
included Maya Man, Xin Xin, Wendy Tai, 
Qiangian Ye, Karen Peng, Yining Shi, 
Naomi Chan, Chelly Jin, and Haolin Fang. 


y we °F? 
Lf 
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FIG Wendy Tai. 
005-04 p5.js sketch with fingers bending at different 
angles. 
e e eo e eo 
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FIG Qianqian Ye. 
005-05 p5.js sketch with grid of women flying like 
superheros. 
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Pe ~ pt. 
eo ae a i = - 
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FIG Karen Peng. FIG Naomi Chan. 
005-06 p5.js sketch with gray dots flowing from top left 005-08 p5.js sketch with stroke lines creating 
to bottom right. triangular forms. 
ee 66 
— ® Ce} 
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FIG Yining Shi. FIG Chelly Jin and Haolin Fang. 
005-07 p5.js sketch with hexagons 005-09 p5.js sketch of Malala with mouths filling 
overlapping. background. 


Series 2 (2017) was an interactive book 
club hosted by Sharon Lee De La Cruz, re- 
sponding to Mindstorms by Seymour 
Papert. 


Interactive Book Club 


FIG Interactive Book Club website with image from 
005-10 video chat with 12 people. 
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P5* —_pd.js Internationalization, 2018. 

006 Theproject of making p5.js more accessible to people who speak different 
languages began in 2015 when Maya Man created an alpha version of the p5js. 
org website with internationalization (i18n) features. The project was contin- 
ued by Aaron Montoya-Moraga in summer 2016, who completed the i18n work of 
the website, making it possible to view the p5.js website and documentation 
in multiple languages. Since then, many people have contributed to the transla- 
tion of p5.js materials, and have led teaching, outreach, and organizing ef- 
forts to bring p5.js to their local communities around the world. 

At the Contributors Conference in 2019, an Internationalization Work- 
ing Group developed the p5.js Global Contributors Toolkit, which included an ov- 
erview of translation workflow, examples, and resources. It opened with this 

letter to global contributors: 

= First of all, we want to thank you for your 
interest in contributing to p5.js. We know 
how precious your time is and, with great 
appreciation, we welcome any kind of con- 
tribution that you could provide. 
You don't have to be a software dev- 

‘ai eloper or a professional educator to 

FIG Spanish translation of p5js.org. aaron contribute to p5.js. We celebrate contribu- 

006-01 montoya-moraga, Guillermo Montecinos, tions of any size and type from anyone 
Website launched April2018. __ who's excited about p5.js. We believe that 

Two people stand in front of p5js.org website in Spanish. contribution is about the process more 

than the product. 
p5.js is not just a language, it’s 

also a community. Since we're building a 

community, we encourage you to be 

mindful of your expectations andthe respon- 
sibilities that come with them. We find 

that, often, taking small steps at the begin- 

ning would maximize your contribution 

in the long run. 

You can help to build the p5.js 
global community in different ways: 


FIG Introducci6n a p5,js. Translation of Getting 
006-02 Started with p5.js by aaron montoya-moraga, 


April 2018. a : ‘ ; 
Stack of books withhand-drawn coverillustrationby * Participate In forum discussion. 
Taeyoon Choi. - Create p5.js sticker in different languages. 
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p5.js 


FIG Hindi translation of p5js.org. Sanjay Singh 
006-03 Rajpoot, Aditya Rana, Manaswini Das, Nancy 
Chauhan, and Shaharyar Shamsh. 

pdjs.org homepage with Hindi text. 


pds 


QhaSHA. 


lees 


FIG Korean translation of p5js.org. Inhwa Yeom, 
006-04 Seonghyeon Kim, Yeseul Song. 

p5js.org homepage with Korean text, graphic 
characters in background. 


P95.JS, 


_. 
FIG Chinese translation of p5js.org. Kenneth Lim 
006-05 July 2018. 

p5js.org homepage with Chinese text, 
mountain sketch in background. 
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- Create p5.js educational content in 
different languages. 
‘Contribute to the p5.js Github: report 
issue, pull/push request. 
- Create zines about p5jjs. 
-Please add more. 
It concluded with this note: 
We want to acknowledge that JavaScript 
is an English-based programming 
language, upon which p5.js is developed. 
With that in mind, we understand the 
underlying colonialist/(neo)imperialist im- 
plications of making p5.js “globally 


« available.” We believe that English should 


not be the prerequisite to coding. Ex- 
pressive coding is a form of creative ex- 
pression regardless of one’s back- 
ground and language ability. Our transla- 
tors have employed a variety of means 

to address this issue, such as rendering 
programming language into symbols 
and, in doing so, prioritize its function ra- 
ther than its linguistic significance. 

Of course, we are always finding ways to 
turn theoretical concerns into action- 


_ able steps. 


Depicted in this section are some 
of the translation efforts thus far. We 
continue to work to make p5.js accessible 
in more languages. 
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P5* Second p5.js Contributors Conference, 
007 2019. 


yess Aninterdisciplinary group of 35 partici- 
pants gathered at the Frank-Ratchye STU- 
DIO for Creative Inquiry, advancing the 
code, documentation, and community out- 
reach tools and exploring the current 
landscape of the p5.js programming envi- 


' ronment. Comprising a diverse range 

of participants within the fields of creative 
technology, interaction design, and 

new media arts, the conference was aimed 


FIG An overhead view of participants istening toa at fostering dialogue through a multi- 
007-01 panel of people with an image of a 3D- 


rendered man onit. 


disciplinary lens. Working groups focused 
on several topic areas: Access; Music 
and Code in Performance; Landscape of 
Creative Tech; and Internationalization. 
Organizers 
"= Carlos Garcia, shawné michaelain hol- 
§ loway, Lauren Lee McCarthy, Luisa Pereira, 
w 72 Dorothy R. Santos, Tom Hughes. 
q Participants 
| American Artist, Omayeli Arenyeka, 
Sina Bahram, Aatish Bhatia, Natalie Bragin- 
sky, Jon Chambers, Luca Damasco, 
Aren Davey, Ted Davis, Carlos Garcia, Stal- 
» gia Grigg, Kate Hollenbach, shawné 
~ michaelain holloway, Claire Kearney-Volpe, 
Sona Lee, Kenneth Lim, Evelyn Masso, 
Lauren McCarthy, LaJuné McMillian, Alli- 
_ son Parrish, Luisa Pereira, Guillermo 
Montecinos, Aaron Montoya-Moraga, Luis 
' Morales-Navarro, Shefali Nayak, Ever- 
_ est Pipkin, Olivia Ross, Dorothy R. Santos, 
: ~ Yasheng She, Jun Shern Chan, Cassie 
FIG Group photoof participants smilingenthusi-_ 'arakajian, Lauren Valley, Xin Xin, Alex Yi- 
007-03 astically with their hands in the air. xuan Xu, Qiangian Ye. 


FIG Aperson sitting next to a lifesize teddy bear 
007-02 works on their laptop. 
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FIG p5.js Contributors Conference, Day 2, 
007-07 Computer Scientist and Scholar Sina Bah- 

ram presents his research on accessibility. 
The photograph is taken from an office area located 
FIG Agroup of people sits around an artificial above the conference meeting space showing 
007-04 campfire made from four LCD monitors. participants seated around moveable tables, looking 
towards a large projection screen of the presenter’s 
slides. 


FIG Aperson witha microphone speaking to fellow FIG Participants conversing in a busy 
007-05 participants. 007-08 classroom. 


FIG Participant speaks at a podium in front of 


FIG Participants sit in a classroom facing the 007-09 projected text about the problem with 
007-06 speakers listening intently. anonymizing data. 
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Outputs 

-Anintroductory workshop on web ac- 

! cessibility led by Sina Bahram. 

-A panel on Blackness and Gender in 
Virtual Space led by American Artist, with 
shawné michaelain holloway and La- 
Juné McMillian. 

- New art installations by Stalgia Grigg, 
LaJuné McMillian, Aatish Bhatia, and Jon 
Chambers. 

-A prototype of a notebook interface for pd. 
js. Created by Allison Parrish. 

- -A design of the p5,js library system for the 

FIG Womanwith microphone speakingtofellow 5 Editor. Created by Cassie Taraka- 

007-10 participants with the text sacred boundaries in jian and Luca Damasco. 

ins projection behind er - Prototypes connecting p5 to other li- 
braries. Created by Alex Yixuan Xu and 
Lauren Valley. 

-p5.js Global Contributors Toolkit. Created 
by Aaron Montoya-Moraga, Kenneth 
Lim, Guillermo Montecinos, Qianqian Ye, 
Dorothy R. Santos, and Yasheng She. 

- How to write non-violent creative code. A 
zine led by Olivia Ross. 

- An overhaul of the p5.js website for acces- 
sibility. Including updates for screen- 


FIG pd.js Contributors Conference, Day 1, 
007-11 Co-organizer shawné michaelain holloway reader accessibility, and improvements 


speaking to participants. : a 
One of the co-organizers stands at a podium with a mic to the home, download, getting start 


inher right hand while conference participants listento €d, and reference pages. With contribu- 

her provide the schedule of events and activities forthe _ tions from Claire Kearney-Volpe, Si- 

p5.js Contributors Conference. na Bahram, Kate Hollenbach, Olivia Ross, 
Luis Morales-Navarro, Lauren Lee McCarthy, and evelyn masso. 

- pdgrid. An implementation of highly flexible triangle, square, hexagon, and octagon 
girds for p5.js. Created by Aren Davey. 

-p5.multiplayer. A set of template files for building a multi-device, multiplayer game 
where multiple clients can connect to a specified host page. Created by L05. 

- Experiments using POLIVE, testing early implementations of softCompile, OSC 
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interfacing and added connectivity with demo for 
MIDI setup. A p5.js collaborative live-coding 
= vjenvironment! Created by Ted Davis. 
- Collaborative performances by Luisa Pereira, Jun 

Shern Chan, Shefali Nayak, Sona Lee, Ted Davis, 
=) and Carlos Garcia. 

me «A performance by Natalie Braginsky. 

«Workshops led by Everest Pipkin and Jon 

Chambers. 
-A closing campfire circle led by Golan Levin. 

Support 
Our contributor conference took place at the Frank- 
Ratchye STUDIO for Creative Inquiry at Carne- 
gie Mellon University, an academic laboratory for 
atypical, anti-disciplinary, and inter-institu- 
tional research at the intersections of arts, science, 
technology, and culture. 
This event was made possible by a grant 

from the National Endowment for the Arts, 
and generous support from the Processing Foundation, Mozilla Foundation, Clinic for 
Open-Source Arts (COSA) at the University of Denver, NYU Tandon IDM, NYUITP, 
FHNW Academy of Art and Design, DePaul University College of Computing and Digital 
Media, and Parsons School of Art, Media, and Technology at the New School. 


FIG Participants sitting at a long table 
007-12 having lunch and a discussion. 


FIG Participants in a meeting in a dark 
007-13 classroom. 
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P5* —_pd.js Access Statement, 
008 2019. 


Atthe 2019 Contributors Conference in 
Pittsburgh, we asked how p5.js could 
further its commitment to access. Many 
conversations took place that week 

which were filled with care, wisdom, and 
hope. Six months later, Luis Morales- 
Navarro, Kenneth Lim, aarén montoya-mor- 
y aga, Dorothy R. Santos, Johanna Hedva, 
FIG Person with a microphone speaking to fellow Lauren Lee McCarthy, and | drafted this lar- 
008-01 participantsin front of text that reads p5,js will 9 Statement to record those ideas 

not add any new features exceptthose that © and subsequent agreements. 
increase access. The primary goals were to pro- 
vide clear criteria for what we would prioritize, while also inviting community members 
into alonger conversation about access in p5.js. We wanted to set a general direc- 
tion and create space for more ideas. We thought it was important to offer specific exam- 
ples of whose access we wanted to prioritize, and highlight the projects within the 
p5.js community that were already increasing access. As the statement says, this work 
was already being done, we just wanted more of it. 

| felt intimidated by the prospect of writing this document. | hope sharing some 
of the challenges will help others feel less intimidated writing things like this in the fu- 
ture. Most of these are visible in the comment history of the GitHub pull request (https:// 
github.com/processing/p5.js/pull/46 76) which added the statement, but I'll summar- 
ize a couple here. 

Some parts of creating this document were challenging. We were never sat- 
isfied with all of the language in the statement, especially when naming the people we 
were prioritizing access for. We used the term “marginalized people’ in the open- 
ing paragraph. Nothing else we considered seemed significantly better, though we did 
choose “marginalized” over “underrepresented,” “underserved,” and “minority.” 
Hopefully naming specific groups later in the statement helps clarify what we mean here. 

For the list of groups that “Access here means making p5.js better for,” we 
brainstormed ways to communicate something like “people from non-European/North 
American geographical locations.” We considered terms like “non-Western” and 
“Global South,” but they felt too reductive or wouldn’t translate well into other languag- 
es. That list is not meant to be definitive (there are many groups that could be add- 
ed), but we also left out some ideas for lack of sufficient terms. 
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This statement is the beginning of a conversation. Though it may be frozen on printed 
paper or a rendered PDF when you read this, we welcome your thoughts on how we 
can grow and shape access to p5,js. I’d love to see us revise this statement over time, 
or write something new to better capture our community's values and ways of work- 
ing together. 

evelyn masso. 


Our Focus on Access 


At the 2019 Contributors Conference, we made a commitment to only add features to p5.js that increase access (meaning inclusion and/or 
accessibility). This means considering the vectors of diversity (e.g. gender, social, economic, race, ethnicity, language, disability, etc.) that 
can impact access/participation, and taking action to acknowledge, dismantle, and prevent barriers. We prioritize the needs of historically 

marginalized groups over the continued comfort of more privileged groups with p5.js. 


We will not accept feature requests that don't support our effort to increase access. You'll see this criteria reflected in our issue and pull 
request templates. 


This is part of an ongoing conversation about access and inclusion within p5.js. Our intention to hold these as core values from which p5.js 
is built is laid out in our Community Statement, which was written at the 2015 Contributors Conference. 


Please consider this a starting point. We want to invite more conversations about what access means and how we can prioritize it. 


Kinds of access 


Increasing access is not a focus on expanding the raw number of people in the p5.js community. It is a focus on making p5.)s available to 
and approachable for people who are excluded from the p5.js community (intentionally or not) and from similar tools and communities. 


Access here means making p5.js better for: 


+ People who speak languages other than English 

* Black people, Indigenous peoples, and People of Color 

* People who are lesbian, gay, bisexual, trans, or queer 

* People with marginalized genders 

+ People with disabilities or illness 

+ People who lack opportunities and/or resources to engage with creative coding due to class or income 
* People with little or no prior experience in open source and creative coding 

* and other people who are systemically excluded and historically underrepresented 


Examples 
These are examples of efforts we believe to increase access: 


* Translating more documentation and other materials into more languages 

+ Improving our support for assistive technologies (such as screenreaders) 

* Following Web Content Accessibility Guidelines in our tools and working towards making it easier for users to follow them in their 
projects 

* Making p5.js error messages more helpful and supportive to people using the tool 

* Mentoring and supporting learners of p5.js within communities that are historically excluded from and marginalized in creative coding 
and the digital arts 


There are other things we haven't thought of yet and we're excited to figure out what they are together. If you have an idea, please share it 
as an issue. 


FIG Screenshot of “Our focus on access” 
008-02 document found in p5.js GitHub repository. 
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P5* pd,js 1.0 Release, 
009 2019. 


Puedes leer la version en espafiol de este 
articulo aqui (https://medium.com/@ 
ProcessingOrg/p5-js-1-0-est%C3%A1- 
aqu%C3%AD-42344aa2b4fd). Vocé 
pode ler a versao em portugués deste arti- 
go aqui (https://medium.com/process 
ing-foundation/chegou-p5-js-1-0-cb064 
7f632a5). BARRIS 5 (https:// 
medium.com/processing-foundation/%E 

FIG Artists in Santiago, Chile learn p5,js in 3%81%8BANE3%8B1%BE%E3%81%9 

009-01 workshop led by Aaron Montoya-Moraga F%E3%81%9B-p5-js-1-0-%E5%85%AC 

Large group of smiling artists display their %EINI6%BB-F8fb9bfla/34) CF ] 

laptops with first colorful sketches made with p5.js. - 

Today we are excited to announce 
the 1.0 Release of p5.js! p5,js is a JavaScript library which aims to make creative ex- 
pression and coding on the web accessible and inclusive for artists, designers, educa- 
tors, and beginners. While it’s been nearly seven years since p5.js began, we inten- 
tionally embarked on the path to reach 1.0 a year ago when Kate Hollenbach worked on 
a first version of aroadmap for this. From there, the effort was led by Stalgia Grigg 
and evelyn masso, working with Lauren Lee McCarthy, Cassie Tarakajian, Kenneth Lim, 
and the thousands of contributors from around the world who joined in working on 
everything including code, documentation, teaching, outreach, writing, art making, and 
more. Reflecting the p5.js project values, 1.0 is not just a code-based milestone, 
but one that is grounded by significant work on the documentation and community. 

Library Overhaul 

In the past year working toward 1.0, we have put out five releases representing 1,488 

commits (each commit can be thought of as a single round of changes in one or more 

files). You can download the new release at p5js.org. There were so many new things, 
we tried to capture key features and changes below. If you contributed something we 
missed here, please let us know at hello@p5js.org and we'll add it. :) 

- Support for animated GIF drawing using the image() function! 

- Addition of beginner-friendly drawing methods like circle() and square(). 

- Support for (and requirement of!) Alt-text within the image drawing methods. alt text, or 
alternative text, is the written text that appears in place of an image on a webpage if 
the image fails to load on a user’s screen. This text helps screen-reading tools 
describe images to visually impaired readers. 
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- Updating all user-facing materials, contributor-facing materials, and the entire code- 
base and accompanying build processes to use ES6, led by Hirad Sab. 

- Introducing new tooling into the build process to ensure maintainability of the code 
and prioritize accessibility, which includes things like linting and HTML valida- 
tion to meet WCAG specifications. 

- An improved p5.Serial library created by Shawn Van Every, Jen Kagan, and Tom 
Igoe that enables communication between p5.js sketch and Arduino (or other serial 
enabled devices). 


Wab Clint 4 Web Client 2 Web Client 3 


p5.SerialPort i 


- Updates to audio/video functionality and 
the p5.Sound. 

- Library led by Jason Sigal to account for 

: SE joes: New browser requirements. 
I J - ve - Friendly Error System (FES) improvements. 
. i : The FES is a system that beginners can 
ic EB it | . : turn onin the p5,js library which checks ar- 

FIG _p5.SerialPort library overview. gument types, catches common err- 

009-02 Adiagram of Arduinos connected viap5.Serial- ors, and provides more accessible expla- 

Port library to web client windows. nations for how to fix the code in the 
console. Weupdatedthisto providemorehelpfulandintuitivefriendlyerrors acrossthe en- 
tire library. 

- Addition of internationalization support for friendly error messages. 

-WebGL drawing mode robustness. This included cleaning up text rendering, geo- 
metry drawing, and lighting; improving texture mapping capabilities; and simplifying 
and documenting the entire WebGL graphics pipeline. 

- Merging our external DOM library into core to enable a range of functionality using HTML 
elements such as webcam, microphone input, video, audio, input elements, and 
file selection. 

- Numerous bug fixes and documentation improvements in all areas. 

- Review, simplification, and documentation of the build release process and tooling for 
future sustainability. 

- Completion of comprehensive unit tests across the entire library to ensure the code 
keeps working with new changes. 

- Implementation of GitHub bots, actions, and templates, including a friendly newcomer 
welcome bot and issue templates to aid new contributors. 

- Anew feature that enables contributors to initiate Twitter polls from GitHub issues to 
lower barriers to access for broader community participation and discussion. 

-Aredesigned set of contributor docs and acontributor docs website which document 
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s+ howthe projectis organized and governed, 

and how to participate. 

p5.js Editor 
Through all this work, the p5.js Editor, 
led by Cassie Tarakajian, has been key in 
FIG Screenshot of contributor docs welcome helping people of all ages and abili- : 
009-03 readme file. ties to quickly get started creating, edit- 

Screenshot of readme that says Welcome! ing, and sharing p5.js sketches. The 
with flowers around it, full text in readme. editor officially launched a little over a year 
ago and has continued to grow since then, recently passing over one million sketch- 
es created on the platform! 

p5.js Contributors Conference 
One of the key steps toward this release was a p5.js Contributors Conference held in 
August at the Frank-Ratchye STUDIO for Creative Inquiry at Carnegie Mellon University 
in Pittsburgh. We welcomed an extremely energetic, diverse, and generous group of 
people ranging from long-time contributors to those entirely new to the project. Working 
groups focused on several topic areas: Access; Music and Code in Performance; 
Landscape of Creative Tech; and Internationalization. 

We spent significant time at the conference talking about the future of p5.js, 
especially sustainability and governance. Together, we came to the decision to explore 
a rotating model of leadership that would open the project to new perspectives and 
directions. It would also make the act of leading less burdensome, reducing barriers to 
entry. With this decision, it became clear that we would need to put significant effort 
into documentation and infrastructure to enable smooth transitions between leaders. 

Documentation 
Based on the conference and online discussions, we worked to document the project, 
its organizational and governance structures, and the various ways to contribute. 
Through these documents, we surface key ideas of structuring our project around com- 
munity-building, diversity, and inclusion. The documentation can be found in a few 
different places: 

-p5.js Website — The website structure and language were updated to be more intu- 
itive and beginner-friendly. We also overhauled the entire site to be more accessible 
and WCAG compliant. This included adding tools to the website build process that 
will validate HTML pages and alert us to accessibility issues. 

-p5.js Reference and Examples pages — Comprehensive and friendly documenta- 
tion is a key aspect of p5.js. Reference entries and examples were added and updated 
to make functionality clearer and easier to learn. 


fe Welcome! $& 
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- Contributor Docs — We worked on a folder of contributor documentation which guides 
people on things like getting started, navigating repository structure, adding 
documentation, creating libraries, understanding release processes, decision making, 
benchmarking, testing, and more. 

+p5.js Global Contributor's Toolkit — A guide for international contributors and a reflec- 
tion on what it means to contribute to p5.js. This addressed both the opportunities 
and problems, including the underlying colonialist/(neo)imperialist implications of mak 
ing p5.js “globally available.” 

- How To Write Non-Violent Creative Code — A zine reflecting on the larger landscape of 
creative code, and how to embrace radical inclusion, decolonization, and a de- 
centering > comme communities within these projects and communities. 

Different contributors also worked 
on anumber of documentation and 
education projects to strengthen 
and diversify the p5.js community. 

=) Qianqian Ye aims to make p5.js more 

) accessible in China, especially within the 
* underrepresented women and non- 
etisinse male identified groups. To counter the fact 

i that most online educational resources 

Lae Senet cll Suh oe suchas YouTube are banned in China, she 

Ascreenshot that shows Qiangianatright + recorded p5,js video tutorials for begin- 
with an insert of her screen, showing codeinp5.jsthat mars in Mandarin and shared them on Chi- 
produpes Calligraphy Bish nese video sites. She also partnered 
—": with female creative coders in China to host 
p5.js workshops for girls, women, and 
nonbinary-identified people, as well as post 
) interviews with role models in the p5.js 

community on Chinese social media. 

Manaswini Das, Nancy Chauhan, 
and Shaharyar Shamshi worked to empow- 
er people of the Indian community of 

FIG Shaharyar Shamshi conducted aworkshop on all backgrounds to learn how to program. 

009-05 p5,js for undergraduate students at the Through Hindi translation efforts, they 


National Institute of Technology Hamirpur. ‘ : 7 
Ateacher points to a projection at the front of a were able to provide tools tothe Indian com 


classroom of the p5.js website. Rows of students with munity in their native language, and 
open laptops look on. prepare educators by collaborating with 
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... various NGOs and individuals to build a 
more diverse community around 
software. 

Matilde Wysocki developed a 
p5.js curriculum and taught homeless TG- 
NC (trans and gender nonconforming) 
youth basic programming as a means of 
self expression and digital literacy in 


p5.js 


FIG Home page for p5.js website translated to ‘ ; = 
009-06 Korean. apersonal security and queer privacy con 


The homepage of the p5.js website is text. As a peer advocate, they exposed 
pic-tured with a white background andacombinationof their community to computational design 
black and magenta text translated to Korean. and machine learning as either a means 
~ of digital literacy or personal 
empowerment. 

Yeseul Song translated the p5.js 
website and reference to Korean, 
adding to our current set of translations 
including Spanish, Chinese, and Hin- 

di (in progress). 
FIG Atthe CS4ALL Com eae Institute in ae auinones and ely dus 
009-07 NYC, Layla Giana tinea mide: mentored by Educational Community Dir- 
school teachers to teach the Creative Web ector Saber Khan, wrote curriculum that 

course, which uses p5,js to teach computational teaches students how to integrate sound, 
eee aha nae _— animation, movement, and interactivi- 
awoman in fon it dark alt hae Hoth anatase yy into creaive computational artifacts WW 
speaking. pd.js. Their work focused on developing 
——=—T . tools for urban teachers who have little ex- 
perience teaching topics in CS to their 
P5Js own communities. 

ve Finally, Ashley Kang created 

= aclanadientaale ap5.js gallery to showcase p5.js projects 
from around the world, with a focus 
on featuring artists, coders, and makers 
with underrepresented backgrounds. 
FIG {p8je'Showeasolcreatadiby Ashley Kang This showcase will launch along with our 


009-08 Screenshot of p5js.org/showcase with text 1.0 release later this month. 
introducing the project. 


o» featured here! 
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oa) evo | ae Next Steps 


Cz les —_ One of the key decisions we made at 
eel se = the Contributors Conference was that go- 
/ alla - if Dis ing forward, “p5.js will not add any 


pag tise ee BS ilies Nate pea naa 
=o = = me bs Site E access.” We hope that this commit- 


= “— ment will focus the future library around 
Sh Be = our priorities of inclusion, diversity, 


FIG Collection of contributor images for p5.js 1.0 and accessibility. We imagine this may 
009-09 Contributors Zine. open many conversations into the 

; Grid with awide range of images and colors. different ways we can increase access, 
and the range of barriers and struc- 
tures that work against it. We have a large- 
scale vision for how the p5.js library 
can significantly push forward web acces- 
sibility, and we want to continue re- 
searching and prototyping that in partner- 
ship with disabled programmers and 
artists, students, and institutions. 

We'll also be publishing our p5. 

js 1.0 Contributors Zine in March. This book 
will celebrate all the contributors to 


FIG Contributor Kate Hollenbach with her 


009-10 students. p5.js and the work we've done together. 
Group of students posingin front of project 9 Stay tuned for an announcement 
po.js website smiling and waving. about it soon! 


Finally, we will be following through on the challenge we've set forth for our- 
selves— to open the project in a new way by implementing a rotating model of leader- 
ship! Lauren Lee McCarthy will be stepping down from her role as project lead, mak- 
ing space for exciting new ideas and leaders in the project. Look out for an open call for 
p5.js Project Lead coming later this month. 

More soon! We're so looking forward to digging deeper into all this work after our 
1.0 release, and engaging the community in deeper and more expansive ways. For 
now, we want to say biggest thanks to all of you artists, makers, teachers, students, sup- 
porters, and contributors for being a part of it. p5.js would not be what itis, and we 
would not be who we are, without you. <3 
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P5* —pd.js x W3C: Web We Want, 2020. 

010 Eachyear, the World Wide Web Consortium (W3C), a nonprofit organization 
where web technologies like HTML and CSS are designed and standardized, or- 
ganizes a week-long meeting of its entire community. This meeting, known 
as TPAC (Technical Plenary & Advisory Committee meeting), has one portion ded- 
icated to public breakout sessions, where topics range from how to get start- 
ed contributing to W3C, to privacy and security in HTML, web accessibility, Web- 
XR, and other new technology standards on the web. For the 2020 TPAC, 

Lauren Lee McCarthy worked in collaboration with W3C and Bocoup to curate 

newbie- and artist-friendly sessions. These sessions opened wide-rang- 

ing conversations between W3C contributors, p5.js and Processing community 

members, and many who were participating in the W3C community directly 

for the first time. 

Creative Imagination for an Ethical Web 
Mindy Seu, Ashley Jane Lewis, shawné michaelain holloway, and Amelia Winger-Bear- 
skin reflected on their diverse practices and how each points us toward a future vi- 
sion of an ethical internet. 

Mindy Seu introduced her recent cyberfeminismindex.com project, which 
aims to trace cyberfeminism from the 90s to today, bringing together global and intersec- 
tional perspectives, working in a way that is permeable, open-source, and crowd- 
sourced. Mindy’s comments about design and form when considering how the index 
would be presented, and her reference of Paul Soullelis’s idea of “download as an 
act of protest” were especially impactful. 

Ashley Jane Lewis presented her practice, which is grounded in ideas of 
Afrofuturism, and her thinking about speculative justice and community engagement 
within art and tech. In Investing in Futures: Beyond Policing, Ashley worked with a 
team to create a card game of creative constraints that asked participants to collabora- 
tively imagine a world where community is based not on policing but on care. She 
also discussed her work with ml5.js, which is an open-source machine-learning tool 
and a sister project to p5.js. Within that project, she has been leading an effort to 
reconsider the role of codes of conduct and community agreements, asking “How do 
we articulate our responsibilities to the community?” 

Amelia Winger-Bearskin opened by noting that when Thomas Jefferson and Ben- 
jamin Franklin were drafting the U.S. Constitution, they spent time learning from the 
Iroquois Confederacy. Many of the principles of the Constitution were directly based on 
their confederacy, but they left out ideas about the social and cultural networks that 
sustain the Iroquois Confederacy. Amelia points out how this “I see it, | like it, | want it, | 
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eu take it” approach is still embedded in tech 
=. today, which she likens to building a 
project without checking its dependencies. 
As she putit, “The problem with colonial 
mindset is one of underfitting: extracting an 
" idea without the context which made that 
' idea workin the first place.” She urged us 
ae ae ; _ not to ignore data, but to seek data and 
melia Winger-Bearskin presenting a video : : i ; 

010-01 work with abstract-generated visuals. perspectives from diverse sources. “Don't 

Brown and purple Bézier curves mirrored colonize our future!” 
across the screen, folding inward. Finally, shawné michaelain holloway 
read from her paper, “Of the Web as Homefront: In Regard to Freedoms of Speech 
and Freedoms In General,” which urgently called for a rethinking of the web. She pushed 
us to become aware of our encoded expectations, saying “When [the web as we 
know it] became the internet standard, the white, linear, page-focused, copycat struc- 
ture of the book became locked into our imagination and has since dictated what 
kinds of content can and should be created for the entirety of the digital space.” Instead, 
she proposed a model of “refactoring” to rearrange the web. 

The process of refactoring can feel like ripping apart a codebase down the mid- 
dle and holding the raw chunks in your hands, then trying to stitch it back together 
ina different form. Some pieces inevitably get left behind and we discover new ones 
which must get made. It’s a process that feels messy and exhilaratingly risky, but 
you take on that risk because you've recognized that the current structure is broken and 
cannot continue with patches alone. The feeling of a successful refactor as limit- 
less. And as shawné says, “Such limitlessness is also what makes [the web] such a beaut- 
ifully mysterious, risky, and desirable place to be.” 


Accessing WebXR Through Art 
Valencia James, Stalgia Grigg, and 
Evelyn Eastmond presented their work 
developing platforms and tools that 
open access to WebxXR through art, ina 
time when remote experimentation 
is desperately needed. 

Evelyn Eastmond presented 
her work with M Eiffler, where they worked 


FIG Valencia James performing using her 


010-02 Volumetric Performance Toolkit. ; 
3D representation of Valencia dances on white with art students to develop an XR plat- 


platform structure while avatars watch. form that supported a remote critique space. 


PROCESSING COMMUNITY CATALOG P5* 010 250 


They collected data about the classroom experience and incubated new tools, includ- 
ing a prototype in Mozilla Hubs where students dropped in virtual models, videos, 
and sounds for discussion. They found that by using this tool, students could again find 
a sense of connection to their peers and art work and regain a sense of community 
that Zoom wasn't offering. Evelyn also questioned Microsoft's role in this space, asking 
if “Microsoft wants to support not just the future of the open web for developers 
but if it also wants to support the future of the open web for spatial and embodied mak- 
ing as well.” 

Valencia James introduced her project Al_am, which explores how artificial in- 
telligence (Al) and contemporary dance can inform and advance each other. Ina 
duet between Al and a human dancer, Valencia blurs the distinction between virtual and 
physical as well as student and teacher. This work informed her current project, 
the Volumetric Performance Toolkit, which is a set of tools that allows movement artists 
to capture and stream their performances in real-time from their own living spac- 
es, using minimal equipment, to be viewed by a virtual audience of real people. Central 
to this work is creating an accessible tool that supports “artists of all ethnicities, 
cultures, and abilities to participate.” 

TJ Stalgia Grigg questioned how tools articu- 

=~ “ late a worldview and center a set of val- 
ues for creative expression. Looking at XR 
pedagogy, Stalgia contrasted the 
Decolonizing Augmented Reality syllabus, 
compiled by Jessy Escobedo and Sel- 
wa Sweidan, with the commercial tool Spark 

= AR filters. They asked, “How can we cre- 

FIG Stalgia Grigg presents their p5.xr library. ate tools that pie deeper forms of quee: 
010-03 Slide with yellowp5.xrscreen,XandRposi- tioning? Tools that make people want 

tioned like eyes inacircle with atear dripping to learn how to critique power instead of fur- 
from the R. ther entrench it?” Stalgia walked us 
through a demo of the p5.xr library they created that enables people to easily make an 
immersive sketch. They spoke to the need for more tools in the XR space that 
offer accessibility without restrictions on content, or predefined judgements of value. 

Consentful Communication on the Web 
How do we foster consentful communication on the web? Xin Xin, evelyn masso, 
and aarén montoya-moraga shared their experiences working to welcome newbies on 
GitHub, centering developer discussions around accessibility, considering the 
cultural implications of internationalization, and building open-source chat tools that 
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think through security and memory in 
conversation. 
evelyn masso talked about encod- 
ing values in open source. What often 
gets lost on GitHub is the fact that there are 
two or more people on each side of an 
interaction. How do you set boundaries for 
.. maintainers and contributors, and how 
ae do you document policies to support these 
010-04 SidereadingConsentisnotpossibe tue oUuNdaries? They offered the p5.js Ac- 
don't move at the speed of trust” with circles cess Statement as one example of using 
and squares connected via wavy lines. documentation to maintain a project’s 
values in development. The statement makes explicit “a commitment to only add fea- 
tures to p5.js that increase access (meaning inclusion and/or accessibility). This 
means considering the vectors of diversity (e.g., gender, social, economic, race, ethnic- 
ity, language, disability, etc.) that can impact access/participation; and taking action 
to acknowledge, dismantle, and prevent barriers. We prioritize the needs of historically 
marginalized groups over the continued comfort of more privileged groups with p5.js.” 

In avery personal talk, aarén montoya-moraga talked about their experience as 
a Chilean, non-native English speaker working in open source. They shared their con- 
stant doubts: “Am | doing enough / too much? Using the right tone and words? Is it colon- 
izing to write in English? Is it a transparent way to communicate? Do | come across 
as nice or condescending? How do| think through the side effects of what we do?” They 
pointed toward key documents that guide them, including the p5.js Community State- 
ment, p5.js Contributor Docs, Berlin Code of Conduct, and Chatam House Rule. 

Xin Xin discussed their project Togethernet, which starts with the question, “What 
would social media look like if it prioritized users’ intentions behind every instance 
of online communication?” Through a deep dive into technical infrastructure, interface 
design, and user testing, Xin is building a communication tool that aims to trans- 
form digital rights policies into embodied practice. Key to this work is an exploration of 
consent, learning from wide-ranging precedents, including the FRIES framework 
(Freely given, Reversible, Informed, Enthusiastic, and Specific), the Fediverse, and kin- 
ky feminist sexblog The Pervocracy. 

Special thanks to Dominique Hazael-Massieux, Boaz Sender, and Sheila 
Moussavi for their support in organizing these sessions! We look forward to future collab- 
orations and continued work together with W3C to make the internet more inclusive 
and accessible. 


Consent is not possible if we don’t 
move at the speed of trust 
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P5* —_—pd.js Libraries, Recorded, 
011 = 2021. 
Core Libraries 
-p5.Sound (https://p5js.org/reference/#/libraries/p5.sound) brings the Proces- 
sing approach to Web Audio as an addon for p5.js. Functionality includes audio input, 
playback, manipulation, effects, recording, sequencing, analysis and synth- 
esis. The library is designed to be used in tandem with p5.js. p5.Sound is built with sev- 
eral modules (Clock, TimelineSignal, and signal math components) from Tone.js, 
an interactive music framework developed by Yotam Mann. p5.Sound was created by 
Jason Sigal in 2014. 
Community Libraries (https://docs.google.com/spreadsheets/d/1bUzJDOcvi 
to7Yi_S_y8KOZyLpdzcP4fL-LoALRc8QbU/edit#gid=1849576713) are 
developed, owned, and maintained by members of the p5.js community. They 
are independently and generously created to share. They are all open- 
source and include their own reference and examples. This is the list of Librar- 
ies pulled from p5js.org/libraries on October 9, 2021. 
-pd.animS (https://wixette.github.io/p5.animS/) animates p5.js shapes by rendering 
their drawing processes. Created by Yonggang Wang. 
- asciiart (https://tetoki.eu/asciiart) is a simple and easy-to-use image-to-ASCll art 
converter for p5js. Created by Pawel Janicki. 
-p5.bezier (https://github.com/peilingjiang/p5.bezier) helps draw high-degree Bézier 
curves with unlimited points. Created by Peiling Jiang. 
-p5.ble (https://itpnyu.github.io/p5ble-website/) enables communication between BLE 
devices and p5 sketches. Created by Yining Shi, Jingwen Zhu, and Tom Igoe. 
- p5.bots (https://github.com/sarahgp/p5bots) lets you interact with your Arduino (or 
other microprocessor) from within the browser. Use sensor data to 
drive a sketch; use a sketch to drive LEDs, motors, and more! Created by Sarah Groff- 
Palermo. 
-p5.button (https://www.nicoatek.com/js_libraries/p5.button.min.js) is a small, one func- 
tion library to design and render simple or styled buttons directly in p5.js canvas. 
Created by Nicolas ATEK. 


* pd.buttons (htips://github.com/koerismo/p5. buttons) is a library that aims to de- 
complicate scripting buttons. Created by Jadon L. 


*pd.clickable (https://github.com/Lartu/pd.clickable) is an event-driven, easy-to-use 
button library for p5.js. Created by Martin del Rio. 


-pd.cmyk.js (https://github.com/jtnimoy/p5.cmyk.js) is a tool for CMYK ColorSpace. 
Created by JT Nimoy. 


P5.JS P5* 011 253 


-p5.collide2D (https://github.com/bmoren/p5.collide2D) provides tools for calculating 
collision detection for 2D geometry with p5.js. Created by Ben Moren. 

- Concave Hull (https://github.com/markroland/concaveHullJS) calculates a Concave 
Hull from a set of points in 2D space. Created by Mark Roland. 

- CO2Budget js (https://github.com/OlafVal/CO2Budget.js) opens up the idea of the 
CO2-Countdown to creative communities of coders, designers and artists 
associated with p5.js and JavaScript. Created by Olaf Val. 

- cursor.js (https://raw.githubusercontent.com/Aayush95f/cursor/main/cursor.js) 
helps you to create different cursors at different times with JavaScript. Created by 
Aayush. 

-c2,js (nttp://c2js.org) c2.js is a JavaScript library for creative coding based on compu- 
tational geometry, physics simulation, evolutionary algorithm, and other modules. 
Created by Ren Yuan. 

-p5.Create (https://github.com/zachmohammed/P9.Create) is a library which provides 
save, animation, collision and tag functions designed for efficient game creation. 
Created by Zach Mohammed. 

-p5.createloop (https://www.npmjs.com/package/p5.createloop) creates animation 
loops with noise and GIF exports in one line of code. Created by Peter Hayman. 

-p5.dimensions (https://github.com/Smilebags/p5.dimensions.js) p5.dimensions ex- 
tends p5,js’s vector functions to work in any number of dimensions. Created by 
Smilebags and Max Segal. 

-p5.EasyCam (https://github.com/freshfork/p5.EasyCam) is a simple 3D camera 
control with inertial pan, zoom, and rotate. Major contributions by Thomas Diewald. 
Created by jWilliam Dunn. 

-p5.experience (https://github.com/loneboarder/p5.experience.js) adds additional 
event-listening functionality for creating canvas-based web applications. Created by 
Felix Meichelbock. 

-pd.func (https://idmnyu.github.io/p5.js-func) is a pd extension that provides new 
objects and utilities for function generation in the time, frequency, and spatial 
domains. Created by R. Luke DuBois. 

-p5.geolocation (https://github.com/bmoren/p5.geolocation) provides techniques for 
acquiring, watching, calculating, and geofencing user locations for p5.js. Created by 
Ben Moren. 

-po.gibber (https://charlie-roberts.com/gibber/p5-gibber/) provides rapid music 
sequencing and audio synthesis capabilities. Created by Charlie Roberts. 


*pd.glitch (https://p5.glitch.me/) extends pd.js for glitching images and binary files. 
Created by Ted Davis. 
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- grafica.js (nttps://github.com/jagracar/grafica,js) lets you add simple but highly con- 


figurable 2D plots to your p5.js sketches. Created by Javier Gracia Carpio. 


-p5.gui (https://github.com/bitcraftlab/p5.gui) generates a graphical user interface for 


your p5.js sketches. Created by Martin Schneider. 


-|_AM_UI (https://github.com/zturtledog/I_AM_UI/blob/main/I_AM_UI js) is a UserInt- 


erface library. Created by sam oakes. 


-p5.jacdac (https://microsoft.github.io/jacdac-docs/clients/p5js) enables you to 


plug-and-play micro-controllers for p5.js. Created by Jonathan de Halleux. 


-p5.joystick (nttps://github.com/Vamoss/p5.joystick) enables you to connect and play 


with physical joysticks. Created by Vamoss. 


-p5.j5 (https://github.com/monteslu/p5.j5) is a full Johnny-Five.io Nodebots/robotics 


library for Arduino and other microcontrollers made to work directly in browser 
with WebSerial or WebUSB. Created by Luis Montes. 


- poLiveMedia (https://github.com/vanevery/poLiveMedia) is a real-time audio, video, 


canvas, and data sharing. Created by Shawn Van Every. 


- pd.localmessage (https://github.com/bmoren/pd.localmessage) provides a simple 


interface to send messages locally from one sketch to another for easy multi- 
window sketching! Created by Ben Moren. 


-marching (https://github.com/jtnimoy/marching) supports raster to vector conversion, 


isosurfaces. Created by JT Nimoy. 


-p5.math.js (https://editor.p5js.org/bharathsatheesan/a/sketches/NHvinWyye) con- 


verts mathematicla operations of JavaScript into simple human language so that they 
can be understood really quickly. Created by Bharath Satheesan. 


- mappa (https://github.com/cvalenzuela/Mappa) provides a set of tools for working 


with static maps, tile maps, and geo-data. Useful when building geolocation-based 
visual representations. Created by Cristobal Valenzuela. 


-ml5.js (https://ml5js.org/) builds on Tensorflow.js and provides friendly access to 


machine learning algorithms and models in the browser. Created by NYU ITP/ 
IMA and contributors. 


- numero (https://github.com/nickmcintyre/numero) is a friendly and intuitive math 


library for p5.js. Created by Nick Mcintyre. 


* pd.particle (https://github.com/bobcgausa/cook-js) can be used to create data-driven 


effects which are defined through user structures or JSON input and user-draw 
functions. Created by Robert Cook. 


-p5.party (https://github.com/jbakse/p5.party) is a library for easily creating networked 


multiuser games, apps, and sketches. Created by Justin Bakse. 
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- p5.pattern (https: //github.com/SYM380/p5. pattern) is a pattern drawing library for 
pd.js. Created by Taichi Sayama. 

- physics diagram language (https://github.com/phywand/pdl-library/) is a physics lan- 
guage for developing static and interactive diagrams on the web. Created by 
lan Lawrence. 


- po.play (http://p5play.molleindustria.org/) provides sprites, animations, input and 
collision functions for games and gamelike applications. Created by Paolo Pedercini. 


- pd.Polar (https://github.com/liz-peng/po.Polar) provides mathematical abstractions 
making it easy to create beautiful, kaleidoscopic, radial patterns. Created by Liz Peng. 


*po.quadrille.js (htips://objetos.github.io/p5.quadrille.js/) is a p5.js quadrille library. 
Created by Jean Pierre Charalambos. 


-react-p5 (https://github.com/Gherciu/react-p5) lets you integrate p5 Sketches into 
your React App. Created by Gherciu Gheorghe. 


*pd.recorder (https://github.com/doriclaudino/p5.recorder) records sketch canvas 
and audio. Created by Dori Claudino. 


-pd.Riso (htips://antiboredom.github.io/p5.riso) is a library for generating files suitable 
for Risograph printing. It helps turn your sketches into multi-color prints. Created by 
Sam Lavigne and Tega Brain. 

-rita.js (nttps://rednoise.org/rita) provides a set of natural language processing objects 
for generative literature. Created by Daniel C. Howe. 

- Rotating knobs (https://codeforartists.com/RotatingKnobMaker) makes knobs you 
can rotate with custom graphics and return value ranges. Created by Miles DeCoster. 

-p5.scenemanager (https://github.com/mveteanu/p5.SceneManager) helps you 
create sketches with multiple states / scenes. Each scene is a like a sketch within the 
main sketch. Created by Marian Veteanu. 

-pd.screenPosition (https://github.com/bohnacker/pdjs-screenPosition) adds 
the screenX and screenY functionality from Processing to p5.js. Created by Hartmut 
Bohnacker. 

-p5.scribble (https: //github.com/generative-light/p5.scribble.js) draws 2D primitives 
ina sketchy look. Created by Janneck Wullschleger, based on a port of the ori- 
ginal Processing library. Created by handy. 

- pd.serial (https://github.com/vanevery/p5.serialport) enables serial communication 
between devices that support serial (RS-232) and p5 sketches running 
inthe browser. Created by Shawn Van Every, Jen Kagan, and Tom Igoe. 

-p5.shape.js (https://github.com/gaba5/p5.shape.js) adds more simple shapes to the 
p5.js framework. Created by Sebastien Lorentz. 

- Shaped (https://github.com/pfel 223/Shapejs) is a 2D primative library for elemen- 
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tary students who are learning to code for the first time. Created by Patrick Ester. 


-simple.js (https://github.com/makeyourownalgorithmicart/simple.js/wiki) provides 
helper functions and defaults for young and new coders. Created by Tariq Rashid. 


-p5.slides (https://github.com/GarrettMFlynn/p5.js-slides) is a presentation platform 
written in p5.js. Created by Garrett Flynn. 


- posnap (https://www.npmjs.com/package/posnap) is acommand-line interface that 
creates and saves snapshots of a p5 sketch on an interval. Created by Zach Krall. 


-pd.speech (https://idmnyu.github.io/p5.js-speech/) provides simple, clear access to 
the Web Speech and Speech Recognition APIs, allowing for the easy creation of 
sketches that can talk and listen. Created by R. Luke DuBois. 

- p5.start2d.js (https://github.com/eltapir/p5.start2d js) is an extension for 2D static art 
using pixels, millimeters, centimeters or inches. Created by Kris HEYSE. 

- p5.tiledmap (htips://github.com/linux-man/p5.tiledmap) provides drawing and helper 
functions to include maps in your sketches. Created by Caldas Lopes. 

- TiledPlay (https://github.com/andrewtacon/p5.tiledplay.js) bridges the functionality of 
p5.js, pd.play.js, and p5.tiled.js to easily create 2D platformer games using JavaScript. 
Created by Andrew Tacon. 

* po.timer (https://github.com/scottkildall/p5.timer) performs asynchronous timing 
functions: countdowns, one-shot timers, % time elapsed and encapsulates the millis() 
function, and other related calculations that often clog up your code. Created by 
Scott Kildall. 

-pd.touchgui (https://github.com/L05/p5.touchgui) is a multi-touch and mouse GUI 
library for p5.js. Created by Carlos L05 Garcia. 

- tramontana (https://www.tramontana.xyz/) enables use of many devices (iOS, Android, 
tramontana Board, ...) to create interactive environments, interactive spaces or just 
prototype experiences at scale and in space. Created by Pierluigi Dalla Rosa. 

- TurtleGFX (https://github.com/CodeGuppyPrograms/TurtleGFX) allows you to code 
with Turtle Graphics in JavaScript. Great for education and creative coding. Created by 
Adrian. 

-pd.tween (https://github.com/Milchreis/p5.tween/) enables easy tween animations for 
your objects and shapes. Created by Nick Miller. 

- vida (htips://tetoki.eu/vida) is a simple library that adds camera (or video) based 
motion detection and blob-tracking functionality to p5js. Created by Pawel Janicki. 


-pd.voronoi (https://github.com/Dozed12/p5.voronoi) provides a set of tools to draw 
and utilize voronoi diagrams in your p5.js sketches. Created by Francisco Moreira. 


-pd.wasm (https://github.com/limzykenneth/pd.wasm) is an addon library written in 
Rust and compiled to WebAssembly that implements common functions found in 


P5.JS P5* = 011 257 


p5.js. Created by Kenneth Lim. 

*WebMidi.js (https://github.com/djipco/webmidi) enables you to easily send and 
receive MIDI messages from p5. Created by Jean-Philippe Cété. 

-pd.webserial (htips://github.com/gohai/p5.webserial/) is a library for interacting with 
Serial devices from within the browser, based on Web Serial API (available on Chrome 
and Edge). Created by Gottfried Haider. 

- po.xr (https://p5xr.org/#/) is a library for creating VR and AR sketches with pd. Cre- 
ated by Stalgia Grigg. 

-p5.3D (https://github.com/FreddieRa/p5.3D) supports 3D Text and Images in WebGL. 
Created by Freddie Rawlins. 
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P5* —pd.js Leadership 
012 = ‘Transition, 2020. 
From 2013-2020, the p5.js project was led by Lauren Lee McCarthy. Follow- 
ing the release of 1.0 and discussions at the 2019 p5.js Contributors Conference, 
p5.js began a transition to rotating leadership (https://medium.com/ 
processing-foundation/making-space-for-the-future-of-p5-js-d3c6bd3da9ac) 
the next phase of p5.,js: 
After nearly seven years of developing and leading the p5.js project, | will be leaving my 
role as project lead in January 2020. It’s time to open up space for others to lead, 
and to build new projects and communities. The dream | have for this project is to move 
toa model of rotating leadership. | want to see a one-year project lead fellowship 
position through the Processing Foundation that offers a paid opportunity to steward 
and lead the project in whichever direction this person chooses. Former project 
leaders would act as mentors for them, helping with handoffs and transition from year 
to year. | believe rotating leadership would best facilitate new ideas and perspec- 
tives guiding the project. It would open opportunities for more people to lead and learn 
from this experience in a supported and sustainable way. 
| want to express my deep gratitude to the thousands of contributors, teachers, 
and creators. There are too many to name, but here is a partial list (nttps://github. 
com/processing/p5.js#contributors) (please add yourself if your name is missing). Ma- 
ny of you have been contributors over years, guiding the project to key milestones 
and new directions. The project will be strengthened by making space for all these new 
leaders. My hope is that p5.js continues and grows, and that long-time and newbie 
contributors alike feel welcome, supported, and empowered as we take this next step 
for the project. 
In April 2020, the p5.js community embarked ona process to transition to a rotat- 
ing leadership model. We held an open call for our inaugural rotating p5.js 
project lead, whose role over the one-year term is to steward the p5.js project, 
software, and community: 
In February, we reached our 1.0 Release, a significant milestone in terms of software, 
documentation, and community. Now, we are seeking a motivated individual to 
act as a catalyst for the next phase of growth, alongside our productive and prolific 
community, and in service of our collective investment in exploring the creation 
of art and design with technology. The p5.js Project Lead’s role will be to continue 
stewarding the p5.js project, software, and community, providing leadership in 
creating generative spaces to gather, speak up, and participate. 
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p5,js is an open-source community whose ethics transfer to our working model. Rather 
than using a top-down model of leadership, we are committed to inclusion and 
access. We value the work of the collective equally and seek a candidate that has a 
demonstrated interest in facilitating, guiding, collaborating, and making coding 
accessible and inclusive for artists, designers, educators, beginners, and anyone else! 
We are eager to work with someone who will lead the project with imagination, initia- 
tive, and independence. We are committed to supporting this trajectory through men- 
torship provided by previous p5.js Fellows and project leads. The position will 
be supervised by the Processing Foundation, which will also provide support and 
collaboration. 
Agroup of 15 volunteers from the community guided the process through an op- 
en Call, interviews, and final selection. The selection team considered each 
applicant’s experience and potential for organizing, community building, techni- 
cal direction, and commitment to diversity, inclusion, and access. We looked 
especially for the ability to work openly and collaboratively, considering how this 
role could support learning for the community as well as the lead. We asked 
how the po,jsc js Tuy could provide collective mentorship to support the proj- 
Z ect lead stepping into this new role. It 
was avery difficult decision with so many 
visionary applicants. Moira Turner was 
selected as the next p5.js Project Lead, and 
led the project from August 2020- 
February 2021. She described experiences 
that prepared her for the role in her intro- 
ductory medium post, “Always look at where 
you want to go — not where you don’t 
want to be.” (https://medium.com/process 
: ' ing-foundation/always-look-at-where- 
hs " you-want-to-go-not-where-you-dont-want- 
oe to-be-69f82ba58762): 
In motorcycling there’s a concept 


FIG Moira Turner is a queer Black woman who stu- 

012-01 studied Anthropology and African American : 
studies at the University of Southern California, Called hyperfocus. When trying to av- 

After graduation, she taught computer sciencetoele- oid an object in the road, you should look 


mentary and middle school students for three years. This towards your destination, not at the 


experience teaching exposed her interest in coding : : ‘ 
and passion for inclusive programming spaces. Now she object you are trying to avoid. Many pew 


is the current project lead for p5.js and is excited to riders get caught up staring at the ob- 
work with p5’s multifaceted community. ject they want to avoid and inevitably run 
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into it. Why? Because we steer our bodies to whatever our eyes are fixed on. Always look 
at where you want to go — not where you don’t want to be. The deficit of representa- 
tion of people of color in CS leaves students without role models, which exacerbates ste- 
reotypes and perpetuates the cycle. It’s important that historically marginalized 
students have role models so they canimagine themselves in this field and, by doing so, 
actualize that reality by steering towards it. 
When | arrived at Emerson, | would work in collaboration with site teachers to build 
an environment where students who often don’t feel successful can see themselves 
in a positive light. We worked to build inclusive experiences that allowed young, under- 
represented students the opportunity to build foundational computational-thinking 
skills and promoted interest in a future in CS and related fields. Because historically mar- 
ginalized groups are often deprived of aspirational role models in tech, relationship- 
building and intentional environments were key in providing my students with a destina- 
tion to move towards. As Maya Angelou so aptly put it: “People will forget what you 
said... but people will never forget how you made them feel.” 
In April 2021, evelyn masso and Qiangian Ye became the next p5,js project 
Co-Leads. evelyn described their early experiences with p5.js in their introduc- 
tory Medium post, beginnings (https://medium.com/processing-founda 
tion/beginnings-by-evelyn-masso-/7676719ba4a0): 
| got involved with p5,js itself much later (around 2016) when | started facilitating 
“Intro to Contributing to Open Source” workshops with Emma Cunningham and Rebec- 
ca Bever as part of Write/Speak/Code (https://www.writespeakcode.com/) Los An- 
geles. | felt a lot of responsibility to the folks who were contributing to an open-source 
project for the first time; | wanted to give them an environment of support, respect, 
and care. It’s a vulnerable process, and the way open-source projects treat newcomers 
makes a huge difference. p5.js was the only project | knew! could rely on to provide 
that welcoming space. I'd already contributed to other open-source projects, and | had 
learned the basics of how p5.js worked so | could facilitate these workshops. | even 
fixed a couple bugs (https://github.com/processing/p5.js/pull/2127) that we ran into 
during the workshop. 
When I was a p5.js Fellow in 2019 (https://github.com/processing/p5.js/pull/21 
27),| came in with an engineering-heavy mindset. | kept asking myself, “What 
could | code for p5.js?” and then doing it. Before long, that didn’t feel rewarding for me; 
| was treating myself like a resource to extract labor from, without regard for what 
felt fulfilling for me. | had to revisit why | had first come to p5. Two to three years isn’t a 
long time, but | felt pretty far from the workshops | had initially done with p65. | 
started doing workshops again, leaning into conversations about what was uniquely 
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important about the project and commu- 

nity of p5,js. 
Since then, I’ve realized that | don’t 

work on p5.js so! can write code, or 

even so | can use it to make art. | work on 

p5.js to build and enjoy community. 
Qianqian described their approach 
to leadership as “Tending the 
p5.garden (https://medium.com/ 
processing-foundation/tendin 
g-the-p5-garden-c4f3e666ca39)” 
in their own introductory post: 

) Growing up in Wenzhou, a coastal city sur- 

rounded by mountains in Southeast 

China, | spent a good amount of time in my 

grandparents’ garden. There were 


FIG Qianqian ais a Chinese artist, creative techno- 
012-02 logist and educator based in Los Angeles patches of bok choy, sweet potatoes, and 


(Gabrielino-Tongva Land). Trained as anarchi- SCallions planted in soda cans when 
tect, she creates digital, physical, and socialspaces my grandmother didn’t have extra planters. 


exploring issues around gender, immigrant, power, and The neighbors often came to hang out 
technology. She received a Master of Landscape 


Architecture from Cornell University and was a Process- in the garden, bringing produce, like bitter- 
ing Foundation Fellow in 2019.Shecurrentlyteaches melon, that they'd just picked from 
creative coding at USC Media Arts + Practice, andserves their yard as gifts. This inspired a child- 


as ap5.js co-lead at Processing Foundation. hood dream of mine. of building a 
Qianqian, anon-binary Chinese person with , 


black short hair, wearing a black tank top, stand- community gathering space where people 
ing next to an apple tree, with alush gardenintheback- Can meet, chat, and maybe exchange 
ground. produce. 


Teaching p5.js has formed most of my understanding about this project. 
In 2019, | made a series of p5.js video tutorials in Mandarin called Qtv (https://medium. 
com/processing-foundation/interview-with-2019-fellow-gianqian-ye-799c0115 
295) as a Processing Foundation Fellow. The project started with the idea of teaching 
my mom, who lives in China and doesn’t speak English, how to code with pd. | want- 
ed to make the coding tutorials feel intimate and grounded, so | recorded most of them 
in my backyard, with birds chirping, leaves rustling, and an avocado tree in the back- 


ground. | was interested in exploring non-Western narratives while teaching coding, so | 


used examples like Chinese calligraphy brush and urban villages in Shenzhen 
when | explained what random() is. | currently teach creative coding at USC Media Arts 
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+ Practice, where | introduce the students 
to coding through p5. I’ve learned a 
lot from my students about how accessible 
and inclusive p5 is. | have seen how it 
makes them feel less scared about pro- 
gramming, and how quickly it em- 
powers students from all over just as it did 
for me. It makes them feel seen, wel- 
comed, and included. [...] 

L Leading pd is like tending a 
FIG evelyn masso (she/they)isaperson(allthe garden, similar to my grandparents’ vege- 
012-03 time), atech worker (on weekdays), and table garden and the botanical gard- 

a poet (on weekends). She was a p5.js Fellow ; 
in 2019 and has spoken about issues of access in en at CMU. The p5 garden is the warm gath- 
software at venues like the Frank-Ratchye STUDIO for ering space my younger self imagined, 
Creative Inquiry, the W3C TPAC, and Write/Speak/ where people are welcomed to meet, chat, 


Code. Originally from Ohio, she currently lives on unced- learn. and exchange ideas. I’d love to 
ed Tongva land (near Los Angeles) with a rapidly ’ ‘ 


growing collection of houseplants. She spends her free invite more gardeners to join the po.gar- 
time rollerskating, making silly jokes, and reading den, no matter how much gardening 


queer fiction. knowledge they have right now. Bring your 
evelyn wearing a collared white shirt, standing seeds. let’s plant together If you don't 

in front of a stone wall covered in ivy. She is light : , : : 

skinned with shoulder length brown hair and lookingat +ave a planter, bring whatever you might 

the camera, smiling slightly. have, like the used soda cans? 


ox 
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Processing Community Day (PCD) celebrates art and code. 
PCD aims to make learning how to program and learn- 

ing how to make creative work with code accessible to di- 
verse communities, especially those who have not 

had access to these tools and resources. The first PCD was 
in Cambridge, Massachusetts in 2017 and the second 

was in Los Angeles in 2019. Also in 2019, we broadened the 
reach and impact of the PCD community by encourag- 

ing the organization of hundreds of PCDs around the world. 
Over 100 events were organized on six continents. PCD 

is now an annual, worldwide event that has operated mostly 
online through the pandemic. PCD 2021 celebrated the 
20th anniversary of Processing. 
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Processing Community Day Organizer’s Kit, 2019, Xin Xin. 
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COM 2016 Community 

001 Survey, 2016. 

We developed the Community Sur- 
vey to better understand how 

and why our software is used, and to 
get a better grasp on the com- 
munities of people who use the soft- 
ware. From high schools, to uni- 
versities, to the home, how are peo- 
ple working with our software? 
Across the globe, who is using our 
software? What is working and 

what can be improved? 

We announced the Sur- 
vey through amass email to our exist- 
ing list and through Twitter and 
Facebook. We received over 600 re- 
sponses from the middle of No- 
vember to the end of the year. We're 
extremely grateful for the hun- 
dreds of thoughtful responses and 
have summarized them here. 

General Information 
For the survey, we wanted to 
learn which of our software platforms 
people are using and why. Are 
people using only Processing (https 
://processing.org/), p5,js (https 
://p5js.org/), or are they using both? 
What percentage is using Pro- 
cessing for Android (https://android. 
processing.org/) or Proces- 
sing.py (https://py.processing.org/)? 
Do we have people who have 
used our software since it was first 
released fifteen years ago, or 
are most people new? Also, we were 
curious about what the software 


@ Every day 
@ Once a week 
© Oncea month 


@ Vores projectto project 
© Every row and thon 


How often do you use our software? (620 
responses) 

Pie chart: 38% once a week, 26% 
varies, 21% every now and then, 11% every day, 
5% once amonth 


COMMUNITY DAY 


is used for and if people are using it 
to generate income and/or for 
enjoyment? 

@ Less than a yeer 

@ 1-2years 


@ 3-5 years 
@ 5-15 years 


How long have you been using our software? 
(619 responses) 

Pie chart: 36% less than one year, 
30% 1-2 years, 17% 3-5 years, 17% 5-15 years 


How do you use our software? (617 responses) 
Bar chart: 43% classwork, 41% 
professional, 74% hobby, 9% other 


Do you use our software to generate income? 
(619 responses) 
Pie chart: 72% yes, 28% no 
Education 
The original Processing software 
started as a platform for teach- 
ing and learning 
aswellasa 
code sketchbook. 
Like Proces- 
sing, the p5,js 
and Proces- 
sing.py projects have a strong focus 
on learning to code. For the sur- 
vey, we hoped to 


481 (14.1%) 


(oe TT <5 (1.05) 
0 951 (9.0%) 
5d 173 20.2%) 
eta Vn 347.1%) 


learn more 
about who is 


> 123 (20.46) 
+arive  —100 (29.1) 
thor — 14.29%) 


ee ee ee ee) 

What are your main interests? (618 responses) 
Bar chart: 82% interactive, 58% 

animation, 26% sound, 56% data viz, 20% print, 


29% hardware, 14% other 


pats 
Designer 
Developer 


Educator 220 73%) 


Mustien 
Suen! 


aber 


How do you identify? (161 responses) 

Bar chart: 55% artist, 43% designer, 
51% developer, 37% educator, 15% musician, 
24% student, 11% other 


Processing /P 69 (11.1%) 


Proeosaing/ Andes 114 (10.4%) 


0 8D 100150200 280 300 980 400 


Which tools from the Processing family do you 
use? (620 responses) 

Bar chart: 97% Processing, 52% 
pd.js, 7% Processing.py, 11% Processing 
for Pi, 18% Processing Android 


262 (40.5%) 


teaching 
with our software 
and in which 
kinds of classes, both the grade lev- 
el and subject. 
International Communities 
One of the 
most fascinating 
and essen- 
tial aspects of our 
software is 
the international 
scope of the communities. For 
this survey, we received survey re- 
sults from 68 countries, from 
each continent 
except 
Antarctica. 
Algeria, 
Argentina, Aus- 
tralia, Austria, Belgium, Brazil, 
Bulgaria, Canada, Chile, China, Col- 
ombia, Croatia, Czech Repub- 
lic, Denmark, Dominican Republic, 
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398 (4.9%) 


$46 (5135) 


500 (08.6%) 


80 500 550 


Egypt, El Salvador, England, Estonia, 


Finland, France, Germany, 
Ghana, Greece, Hong Kong, Hun- 
gary, Iceland, India, Indonesia, 


Iraq, Ireland, Italy, Japan, South Kor- 


ea, Kuwait, Lithuania, London, 


Luxembourg, Maldives, Mexico, Neth- 


erlands, New Zealand, Nigeria, 


Norway, Pakistan, Paris, Peru, Philip- Four people sitting on the floor talking with a 


pines, Poland, Portugal, Quebec, 


Reunion, Romania, Russia, Scotland, 


Serbia, Singapore, Slovakia, Slo- 
venia, Spain, Sweden, Switzerland, 
Taiwan, Turkey, Ukraine, United 
States, Uruguay, Wales. 


COM Boston, 

002 2017. 

The very first Processing Com- 
munity Day (PCD) was organized by 
Taeyoon Choi and the Proces- 
sing Foundation in 2017. Taking 
place at the MIT Media Lab, 

PCD 2017 drew community mem- 
bers from all over the East 

Coast to get together to meet and 
share what they're working 

on, and to learn and collaborate 

in person. 


Agroup of roughly 100 people smiling at the camera. 
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group of people standing behind them. 


Presenters and Agroup of people sitting around a table eating 
Facilitators: lunch. There's ahandmade sign next to the table 


Eva Diaz, Sydette Harry, Mark in the shape of a cloud that reads “focus groups.” 
Schifferli, Olivia Glennon, Johanna aa 

Hedva, Ben Fry, Casey Reas, Lauren 
McCarthy, Daniel Shiffman, Chris 
Coleman, Golan Levin, Tega Brain, 
Jose Luis Garcia del Castillo, Cassie 
Tarakajian, Gottfried Haider, Jakub 
Valtar, Andrés Colubri, Sharon Lee De 
La Cruz, Aar6n Montoya-Moraga 

and Guillermo Montecinos, Claire 
Kearney-Volpe and Mathura M 
Govindarajan, Rosa Weinberg, Max- 
ime Damecour, Brad Tober, Alex 
Norton, Jose Luis Garcia del Castillo, 
Ari Melenciano, Luisa Pereira, R. 
Luke DuBois Jonathan Feinberg, Cris- ~ 
tobal Valenzuela. } 


Apersonis drawing art on the wall with another 
person controlling the projection with a keyboard. 


Two people gathered around a laptop amid a crowd. 


2 COM __LosAngeles, 

003 2019. 

PCD @ Los Angeles was an inclusive 
event that brought together people of 
allages to celebrate and explore 

art, code, and activism. The day-long 
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ALIEN BODIES workshop with The Best Friends 
Learning Gang & Johanna Hedva. 
Group of people talk around table 
. with physical prototyping materials. 
An artwork made during a Racial Pedagogy workshop called “Monsters, Synths, and Future Gods” by 
Angela “Mictlanxochitl” Anderson Guerrero and Jason Wyman. 
Anartwork consisting of different kinds of plant and flower materials arranged ina 
mandala-formation around three lit Catholic candles. 
In addition to a full day of pro- 
gramming, we made space for any- 
one to share ideas and projects 
with the community. We set up Show 
&Tell Stations, a Processing 
Community Cafe, and a Community 
Open Mic Session for partici- 
pants to sign up on the day of the 
event. The program wra Astack of papers on adesk titled “Manifestos for 
. e prog pped Radical Inclusion.” Some of the text can be seen. 


up with an after-party consisting of It reads, “I hate homophobia. | want spaces that 
performances, food, and drinks. can support growth and jobs for the people who 


Speakers and Session want to be involved...” More first-hand knowledge. 
A Students to be teachers. our only job is to feel 
Organizers Empathy is a skill that can be practiced..." 
Angela ‘Mictlanxochitl’ Anderson papier-maché sculpture with brightly colored 


Guerrero, Patrick Michael Ball- paint, stickers, and sequins is sitting on top of the 
ard, The Best Friends Learning Gang, aa 

One of Color Coded's founding members Chris, Color Coded, Caitlin Conlen & 
presenting. Paisley Smith, Saskia Freeke, Stalgia 


Aperson holds a microphone in front A F ‘ 
of acomputer and speaks, gesticulating with their Grigg, Cynthia xX. Hua, Alden Riv- 


other hand. Behind them, out offocus,ispartof endale Jones, Claire Kearney-Volpe, 
another person's face. Luke Fischbeck, Adelle Lin, Krist- 
event, organized by Xin Xin, featured in McWharter, Evelyn Masso, An Xiao }, 
four themed-tracks — Accessibil- Mina, Jon-Kyle Mohr, Luis Morales- | 
ity, Disability, and Care, Radical Ped- Navarro, Molly Morin, Romi Ron Mor- 
agogy, Under the Silicon, the rison [Elegant Collisions], Peter 
Beach!, and Epic Play!.Eachthemed Polack, Linda Ravenswood, README, 
track contained lightning talks 


. Awhiteboard covered with writing in different 
Emily Saltz, Jeffrey Alan Scudder, color inks, most of which is overlapping each 


and sessions presented by confer- — RachelSimanjuntak, Eddo Stern, Echo ther. The prompts for the workshop are in black 
ink and the responses are on top ofitin red ink. 


ence guests we invited through Theohar, Lee Tusman, roopavas- ost of the phrases in red are included in the 
an open call. udevan, Lark VCR, Jason Wyman. _ finished manifesto. 
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Organizing Team 
Xin Xin, Dorothy R. Santos, Johan- 
na Hedva, Taeyoon Choi, A.M. Darke, 
Tega Brain, Sam Lavigne, Chand- 
ler McWilliams, Yuehao Jiang, Reneé 
Reizman, Tristan Espinoza, Jules 
Kris, Tyler Yin, Hye Min Cho, Kuan-Ju = 
Wu, Ariel Hahn, Christine Mein- 
ders, Tuangkamol Thongborisute, 
Nina Cragg. 


COM Worldwide, 

004 2019-2020. 

The Processing Community Day 
(PCD) initiative is evolving. Moving 
forward from its first iteration 

in 2017, we focused on PCD World- 
wide, by supporting organizers 
across the world to organize PCDs in 
their cities. For 2020, we offered 
amentorship program for PCD World- 
wide Organizers who were inter- 
ested in learning from past commu- 
nity organizers and mentors. 

The goal was to help a more diverse 
group of organizers launch a PCD 

in their local communities. For PCD 
2020, our mentorship program 
uplifted a group of advisors, created 
documentation, and facilitated 
online space to share wisdom and 
experiences. 


Speaker Usha Mohanrajis about to start her 
presentation titled, “Anyone can code - Learning 
tocode at 50.” 


Achild creating a sketch with the p5 Editor. Next 
to the laptop, there is a paper with potato prints of 
similar design. 
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@Done of Visions 


COMMUNITY 
DAY AARHUS = pedaarnus.net 


A flyer for PCD Aarhus 2021. The flyer reads 
“Processing Community Day Aarhus” with the 
date and time of the event. The background is a 
multi-colored noise field. 


One of the algorithmic zines from Processing 
Community Day 2019 in Bristol. 


Organizers 
Xin Xin, Saber Khan. 

Advisors 
Naoto Hieda, Becca Rose Glowacki, 
Aaron Montoya-Moraga, Mathura 
Govindarajan, Nicolas Troncosco, 
Qianqian Ye, Lee Tusman. 


Aperson giving a presentation ata podium. 


PROCESSING COMMUNITY CATALOG 


Processing Community 
Day 2019, 

January 15-February 
15, 2019. 


+ Aarhus, Denmark: Nathalia Novais, 


Tobias Stenberg Christensen, Win- 
nie Soon & Anders Visti. 


+ Abu Dhabi, United Arab Emirates: 


Sarah Fay Krom, Craig Protzel, Ali 
Al-Saqban. 


- Amsterdam: Creative Coding 
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Amsterdam (Sabrina Verhage & 
Lisa Rombout). 

+ Ann Arbor, MI: Christopher Becker, 
Anil Gamcl. 

+ Austin, TX: Natalie Freed, R.A. 
Robertson. 

+ Baltimore, MD: Andrew Bernstein, 
Phong Le. 

+ Bangalore, India: Mathura Govinda- 
rajan, Rushali Paratey, Karthik 
Dondeti. 

+ Bari, Italy: Codice Inutile. 

+ Basel, Switzerland: Max, Andrea, 
Yann, Pedro, Ted, Philipp. 

+ Belgrade, Serbia: Vlada, Bojan, 
Nemanja. 

+ Brisbane, Australia: 

David Harris. 
+ Bristol, UK: Becca Rose Glowacki. 
+ Buenos Aires, Argentina: 

Cristian Reynaga. 


+ Chicago, IL: Tiffany Funk, Allan Berry, 


Jon Chambers, Shawné Michaelain 
Holloway, Kate Hollenbach. 

+ Copenhagen, Denmark: Rune Mad- 
sen and Andreas Refsgaard. 

+ Dakar, Senegal: Marion Louisgrand 
Sylla. 


The logo for PCD Ethiopia 2019. “PCD Ethiopia” is 
enclosed ina hand-drawn, black circle. 


+ Debre Zeit, Ethiopia: Abel 
Wondafrash. 

+ Denver: Chris Coleman. 

+ Dublin, Ireland: Cliona Harmey. 

+ Dublin, Ireland: Sinead McDonald. 
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Novac, Camille de Dieu. 


+ Girona, Catalonia, Spain: Joan 


Leon. 


+ Hong Kong: Daniel Howe, Jane 


Pong. 


+ Istanbul, Turkey: Resat Bozkir. 
+ Jalandhar, Punjab, India: Akash Roy. 
+ Kampala, Uganda, East Africa: 


Ezabo Baron. 


+ Kutztown, PA: Miles DeCoster, 


Josh Miller. 


+ Le Port, Réunion Island: Rich 


Porcher. 


+ Li@ge, Belgium: 3kd.be (Greg 


Berger) - FIG. 


+ Lisbon, Portugal: Marco Heleno, 


David Sousa-Rodrigues. 


+ London, UK: Danilo Di Cuia, Joel 


Gethin Lewis, Kenneth Lim and 


Tom Lynch. 


Los Angeles, CA: Xin Xin, Dorothy 
Santos, Johanna Hedva, Taeyoon 
Choi, A.M. Darke, Tega Brain, Sam 
Lavigne, Chandler McWilliams, 
Casey Reas, Lauren McCarthy, 
Daniel Shiffman. 


+ Luxembourg: Eran Goldman-Malka 


& Henri A. 


+ Madrid, Spain: Adolfo Nadal Ser- 


rano, Javier Fuentes Quijano. 


+ Madrid, Spain: Alfredo Calosci. 
+ Malmo, Sweden: David Cuartielles / 


About 60 participants of Processing Bangalore India posing for a group photograph at the end of the 
event. They are also holding up an interactive art piece based on data that they made through the day. 


+ Gateshead, UK: Dani Walsh. 
+ Geneva, Switzerland: Laurent 


Malmo University / Arduino. 

+ Melbourne, Australia: Mel Huang / 
Media Lab Melbourne. 

+ Mexico City: Proyectil Mx. 

+ Mexico City: Centro de Cultura 
Digital / Enrique Garcia Alcala / 
Antonio Salinas Hernandez. 

+ Middlesbrough, UK: Jack Laidlaw. 

+ Milan, Italy: Codice Inutile. 

+ Minneapolis, MN: Ben Moren. 

+ Montevideo: Luisa Pereira, Brian 
Mackern. 

+ Montréal, Canada: Rodrigo Velasco 
+ Guillaume Pelletier-Auger. 

+ Morelia, Mexico: Fernando Garcia 
Garcia. 

+ Mumbai, India: Behram, Rituparna 
Matkar. 

+ Nantes, France: Stereolux + 
Bérenger Recoules (L’Ecole de 
design). 

+ New Delhi, India: Rintu Kutum, 
Natasha Singh and Mike Cj. 

+ New York, NY: Lee Tusman and 
Matilda Wysocki. 

+ Orlando, FL: Ginger Leigh. 

+ Ottawa, Canada: Artengine (Jason 
Cobill & Anthony Scavarelli). 

+ Pittsburgh, PA: Golan Levin, Tom 
Hughes (Frank-Ratchye STUDIO for 
Creative Inquiry / Carnegie 
Mellon University), Lindsey French 
and Kate Joranson, University 
of Pittsburgh. 
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Agroup of about 40 participants at PCD Quito smiling at the camera. 


+ Playa del Carmen, Mexico: Erick 
Rivera. 

+ Port-Louis, Mauritius: Abdur- 
Rahmaan Janhangeer. 

+ Portland, OR: Megan McKissack. 

+ Porto, Portugal: Pedro Amado. 

+ Quito, Ecuador: Gabriel Andrade. 


Three lime-green ovals are stacked on top of 
each other. “Processing Community Day Porto” is 
enclosed by these ovals. 


+ Richmond, BC, Canada: Dethe Elza. 
+ Rio de Janeiro, Brazil: Marlus Arau- 
jo, Barbara Castro & Joao Bonelli. 


09 FEV 2019 


PUC RIO 


Agrey banner that reads “Processing Community 

Day Rio de Janeiro.” 

+ Rome, Italy: Codice Inutile. 

+ San Marino, Republic of San 
Marino: Daniele Tabellini. 

+ Santa Maria, RS, Brazil: Bruno 
Ruchiga. 

+ Santiago, Chile: Felicidad. 
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Someone placing welcome materials for PCD 
Santiago de Chile ona table. 


Anavy banner that reads “Processing Community 
Day - Brasil.” 


Aparticipant at PCD Sao Paulo on acomputer. 
They are working ona Processing sketch of 
purple circles scattered across the canvas. 


+ S40 Paulo / Brazil: Alexandre Vil- 
lares & Monica Rizzolli. 

+ Seattle, WA: Kai Curtis. 

+ Seoul, Republic of Korea: Woosung 
Jung. 

+ Seoul, Republic of Korea: W&T Lab 
+ Seoul Express Tech Lab. 

+ Shanghai, China: Qianqian Ye, 
Chang Liu, Yuli Cai. 

+ Sharjah, UAE: Salem Al-Qassimi, 
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Eleonora Cervellera, Ali Al-Saqban. 
+ Sheffield, UK: Richard Mather, Cal- Day 2020. 
lum Shutt, Alex Gore + colleagues January 1-December 31, 
and students at Sheffield Hallam 2020. 
University. 
+ Singapore: Ong Kian Peng + 
Andreas Schlegel. 


Processing Community 


Anders Visti (DOKK’). 
+ Accra and Koforidua, Ghana: Fidom 


+ Stockholm, Sweden: Jonas Hub. 
Johansson, Nordic Audiovisual 
Artists. Anil Camcl. 
+ Strasbourg, France: Jér6éme + Bangalore, India: Rushali Paratey, 
Mutterer. Karthik Dondeti, Mathura 
+ Tampa, FL: Mikhail Mansion, Kuan — Govindarajan. 
Ju Wu. + Basel, Switzerland: basel.codes. 


+ Tokyo, Japan: Naoto Hieda, Ayumu 
Nagamatsu & Yasuto Nakanishi. 

+ Toronto, Canada: Adam Herst 
(InterAccess member). 


+ Belgrade, Serbia: Nemanja. 

+ Bournemouth, UK: Edward Ward. 

+ Brisbane, Australia: David Harris 
(Southbank campus, Queensland 

+ Troy, NY: Nick Marchese. College of Art, Griffith University). 

+ Tuzla, Bosnia and Herzegovina: + Bristol, UK: Becca Rose Glowacki. 
Art&Sci Association “Laboratorium” - Chandigarh, India: Samarth Gulati. 
Tuzla. + Chicago, IL: Jon Chambers. 

+ Utrecht, Netherlands: Creative + Ciudad Autonoma de Buenos Aires, 


Coding Utrecht (Fabian van Sluijs & Argentina: David Vinazza. 
Saskia Freeke). 
+ Walla Walla, WA: Justin Lincoln. 
+ Wellington, New Zealand: Birgit 
Bachler / Creative Media 
Production. 


Awhite and orange striped banner that reads 

“Processing Community Day Coimbra 2021.” 

+ Coimbra, Portugal: Joao Couceiro 
e Castro, Joao Miguel Cunha, Sér- 
gio Rebelo, Tiago Martins, 
Penousal Machado. 

* Copenhagen, Denmark: Rune Mad- 
sen and Andreas Refsgaard. 

+ Coventry, UK: Ashley James Brown. 

+ Coyoacan, Mexico: Maria Elena 
Leon. 

+ Debre Zeit, Ethiopia: Abel Wonda- 

Achild dancing in front of a projection of a slide frash (Foka STEM Center). 

that reads “Processing Community Day” inthe -G h China: Topic Societ 

top left with colorful beams coming out from the uangznou, 7 Ina: lopic society. 

center. + Ivrea, Italy: Chiarotto Alessandro. 
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+ Aarhus, Denmark: Winnie Soonand ~*~ 


Ascreenshot of someone sharing their screen 
+ Ann Arbor, MI: Christopher Becker, displaying a code editor anda sketch. 
+ Kanan, Japan: Kei Nakano 


(Chikatsu Asuka it DFR). 


+ Kutztown, PA: Prof. Miles DeCoster, 


Prof. Josh Miller. 


+ Lisbon, Portugal: Marco Heleno, 


Vera Lopes. 


+ London, UK: UAL: Creative Com- 


puting Institute. 


+ Los Angeles, CA: Stalgia Grigg. 
+ Lugbe, Abuja, Nigeria: Michael 


Nwaohiri (FHA). 


+ Madrid, Spain: Alfredo Calosci. 

+ Mexico City: Steam Lab CENTRO. 
+ Minneapolis, MN: Ben Moren. 

+ Nanjing, China: Maggie Ma. 

+ New Delhi, India: Natasha Singh, 


Mike Cj, Rintu Kutum. 


+ New York, NY: Lee Tusman, Matilda 


Wysocki, rebecca marks-leopold, 
Todd Anderson, Oriana Medlicott, 
Bomani McClendon. 


+ Petersburg, FL: OK! Transmit. 
+ Portland, OR, USA: Megan 


McKissack. 


+ Porto, Portugal: Pedro Amado (Fac- 


uldade de Belas Artes da Universi- 
dade do Porto). 


+ Pune, India: Ritvi Mishra. 
+ Quito, Ecuador: Gabriel Andrade. 
+ Richmond, BC, Canada: Dethe Elza 


(Richmond Public Library). 


+ Rio de Janeiro, Brazil: Barbara Cas- 


tro, Carlos de Oliveira, Marlus 
Araujo, Jodo Bonelli. 


+ San Marino: Daniele Tabellini. 
+ $40 Paulo, Brazil: Monica Rizzolli, 


Alexandre Villares, Cristian Cesar 
Cunha, Joao Antonio de F. P.e 
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Ferreira, Marco Macarena, Mariana __ with sketches that experiment with 
Leal, Tatyana Zabanova. 


their new dynamic logo. Submit 
your own sketches!” 

+ Dan Shiffman held a Coding Train 
Special: Coding with Processing Re- 
lease 0001 Alpha -- Happy 20th! 
(https://www.youtube.com/watch? 
v=F8jwQP/wr6k). 

: + PCD 2021 Latinoamérica (https:// 

Brochures and posters for PCD Shanghailaidout © SUutidiesaboutpublication.no 


fest.rocks/) was organized by Sab- 
er Khan 


+ Museum of Crypto Art and Vertical- 


Crypto Art hosted an exhibi- 

tion of artworks created with Pro- 
cessing and a panel discus- 

sion on the future of generative art 
with Casey Reas, Qianqian 

Ye, Dmitri Cherniak, and ix shells. 


+ Processing Community 


onatable. tion.site/sutidiesaboutpublication/ 


Day Copenhagen (https://pcdcph. 


+ Shanghai and Nanjing, China: Paul +©PCD-2021-Latinoam-rica- 


Cheng. 6e70514088ba4b259d839b611d 
+ Stockholm, Sweden: Jonas 12687f) was organized by 
Johansson. Nicolas Troncosco. 


+ Strasbourg, France: Jerome + Processing 20th Anniversary - 


com/) at the Royal Danish Ac- 
ademy was organized by Andreas 
Refsgaard, Stig Maller Hansen, 
and Rune Madsen. 


+ PCD Aarhus (https://pcdaarhus. 


Mutterer. Denver (https://docs.google.com/ 


net/) was organized by Winnie Soon 


+ Sydney, Australia: Luke Hespanhol. —forms/d/e/1FAlpQLScvVHf 
+ Tehran, lran: Filoger. HUkqInxY39lwxcpRT80r2V_jFYoB 


and Anders Visti. 


+ PCD Taiwan (https://clab.org.tw/en/ 


+ Tokyo, Japan: PCD Tokyo QSDqcYqXFLwBt2Q/viewform) 


events/pcd-taiwan/) was organ- 


Organizers. was organized by Chris Coleman. 
+ Toronto, Canada: InterAccess. + Processing Community Day 
+ Toronto, Canada: Erin Kjaer, Tess 2021 (https://timrodenbroeker.de/ 


ized by Taiwan Contemporary Cul- 
ture Lab (C-LAB). 


+ PCD Venice Beach (http://www.bri 


Sutherland, Emily Green, Steve pced2021/) was organized by 
Daniels (New MediaBFAprogram — Tim Rodenbroeker. 
at Ryerson University). + Processing Community Hang- 


ghtmoments.io) was organized 
by Seth Goldstein. 


+ PCD Coimbra (http://pcdcoim 


out Japan #06 (https://pchj06.peat 


bra.dei.uc.pt/2021/) was organized 


COM Worldwide, ix.com/) was organized by 
005 Processing’s 20th Birthday, Takawo Shunsuke. 

2021. + PCD Seoul (https://linktr.ee/ 
Processing was officially launched pced.seoul) at KOTE Space Seoul & 
with “Release 0001 — built 9 Gather Town was organized 
August 2001 in Japan, 6:01:26pm by ped.seoul. 

(5am Eastern).” To celebrate, + Creative Code Jam (https:// 

we organized a distributed, world- www.meetup.com/creativeCode 
wide party! The community Berlin/events/rpmjksycclbcc/) 
celebrated the 20th anniversary of [ONLINE EDITION] was organized 
Processing on August 20-22 by Creative Code Berlin. 

by sharing events, zines, cakes, and - Processing Community Day India 
artwork. #pcd2021 2021 (https://docs.google. 

Community events com/forms/d/e/1FAlpQLSfulkyRC 
+ Year #20 (https://openprocess XBCDrLKXSKRJeixe3tf7qy 

ing.org/curation/70077)fromOpen- GemftillvKlifhHsrYQ/viewform/) 
processing: “OpenProcessing was organized by Processing 
isrunningacoding challenge dur- —_ India (Rasagy Sharma & Anushka 
ing the month of August to cel- Trivedi). 

ebrate the year #20 of Processing _- Creative Coding Fest (https://cc 
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by Sérgio Rebelo. 


+ PCD Ciudad Auténoma de Buenos 


Aires, Argentina was organized 
by David Vinazza. 


- PCD Latinamerica was org- 


anized by Nicolas Troncoso Lopez. 


+ Ben Fry and Casey Reas were 


interviewed on Art Blocks. 


+ Raphaél de Courville did a 


broadcasting about Processing 
and Hic et Nunc on his Twitch 
channel. 


+ Computational Mama did a 


special Processing Community 
Day Stream on her Twitch 
channel as part of PCD India. 


+ Zimaldo Melo led a multi- 


day art and code workshop (http:// 
www.bacteria.com.br) online. 


+ Chelly Jin launched an updated 
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version of Diversity with Code + Art «Is your event serving the interest 


(http://diversity.p5js.org/). of your communities? How 

- A#sketch4processing fundraiser might your attendees benefit from 
was organized on Hic Et Nunc your event? 
by Melissa Rodriguez, Antonius Oki, Aside from the conven- 


p1xelfool, VerticalCrypto Art, 
Raphaél de Courville, and James 
Powderly. 


tional lecture / demo format, 
your PCD can be a show & tell ses- 
sion, azine-making session, 
an audio-visual performance, a DIY 
art show, a game jam, or even 
a group discussion on software art. 
We are excited to learn 
about new ways to organize a 
Processing Community Day from 
you. Thank you for joining us 
for the ride! 
Xin, PCD Director 
Taeyoon Choi. & Lead Organizer 
ALetter to the Organizers 
Dear Processing Community Day 
Organizers, 
Processing Communi- 
ty Day (PCD) is a day picked between 
January 15 and February 15, 2019 
to celebrate art, code, and diversity 
around the world. Although we 
are providing a step-by-step guide 
to lead a PCD in this handout, 
keep in mind that as PCD organizers, 
you are welcomed to define the 
format of your event in any way that 
serves your local communities. 
Hello! Asking the following ques- 
Thank you for registering to org- tions might help define the 
anize Processing Community Day. — event format - 
We understand that it can take 
enormous physical and emotional 
effort to organize a community 


COM Processing Community 
006 Day Organizer’s Kit, 2019, 
Xin Xin. 
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Luisa Pereira and Yeseul Song help facilitate a 


2019 (O) EF. WATS QM sign-language-based p5.js workshop led by 


@A 
eon 


Two women gathered around acomputer at 
Processing Community Day 2017. 


People hanging out at Processing Community 
- Which communities are you Day 2017. 
hoping to engage? Are they affili- 
ated with an institution or do 
event, therefore we have compiled they live outside of aninstitution? | Community Day(PCD)-including, 


Code of Conduct 
All participants in Processing 


but not limited to the PCD on- 
line forum—are required to agree to 
the following Code of Conduct. 


this Organizer’s Kit to help you - What are some ways to make 
get things started. The kitis licensed your event more accessible for 
under a Creative Commons At- folks who might otherwise 
tribution 4.0 International License. feel excluded from the event? This includes all attendees, speak- 
Special thanks to Lauren Mc- - What are some ways to cre- ers, performers, workshop lead- 
Carthy, Casey Reas, Dorothy Santos, atea friendly, inviting environment ers, patrons (sponsors), volunteers, 
Johanna Hedva, and Daniel Shiff- for beginners and folks who and staff. The PCD team is ded- 
man for their guidance and support. arenewto the community? icated to providing a harassment- 
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free experience for everyone, regard- 

less of gender, gender identity 

and expression, sexual orientation, 

disability, mental illness, neur- 

otype, physical appearance, body, 
age, race, ethnicity, nationality, 
language, or religion. We do not tol- 
erate harassment of participants 

in any form. Anyone participant who 

violates this Code of Conduct 

may be limited or expelled from PCD 

at the discretion of the PCD org- 

anizers. This Code of Conductis sub- 
ject to change and expansion. 

Be mindful of your lan- 
guage — Engage with com- 
munity members, mentors, and 
contributors with respect and 
good intention. 

Use your best judgment 
—Ifit will possibly make others uncom- 
fortable, do not say it or post to the 
community forum. 

Be respectful — While 
disagreements may arise, itis not an 
opportunity to attack or threaten 
someone else’s thoughts and/or opi- 
nions. Remember to approach 
every situation with patience, under- 
standing, and great care. 

Be intentional — Consider 
how your contribution will affect 
others in the community. 

Be open minded — 
Embrace new people and new ideas. 
Our community is continually 
evolving and we welcome positive 
change. 

Definitions of Harassment 

include: 

+ Offensive comments related to gen- 
der, gender iden tity and expres- 
sion, sexual orientation, disability, 
mental illness, neurotype, phys- 
ical appearance, body, age, race, 
ethnicity, nationality, language, 
or religion 


Unwelcome comments regarding 
aperson’s lifestyle choices 

and practices, including those 
related to food, health, par- 
enting, drugs, and employment 


+ Deliberate misgendering or 


use of ‘dead’ or rejected names 


+ Gratuitous or off-topic sex- 


ual images or behaviour in spaces 
where they’re not appropriate 


+ Physical contact and simulated 


physical contact (eg, textual 
descriptions like “hug” or “back- 
rub”) without consent or after 
arequest to stop 


+ Threats of violence 
+ Incitement of violence towards any 


individual, including encourag- 
ing a person to commit suicide or 
to engage in self-harm 


+ Deliberate intimidation 
+ Stalking or following 
+ Harassing photography or record- 


ing, including logging online 
activity for harassment purposes 


- Sustained disruption of discussion 
- Unwelcome sexual attention 
+ Pattern of inappropriate social con- 


tact, such as requesting/assum- 
ing inappropriate levels of intimacy 
with others 


- Continued one-on-one communi- 


cation after requests to cease 


+ Deliberate “outing” of any aspect of 


a person’s identity without their 
consent except as necessary to pro- 
tect other PCD community 
members or other vulnerable peo- 
ple from intentional abuse 


+ Publication of non-harassing pri- 


vate communication without 
consent by the involved parties 
PCD prioritizes mar- 


ginalized people’s safety over privi- 
leged people's comfort. 

PCD reserves the right not to act on 
complaints regarding: 
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- ‘Reverse’ -isms, including ‘reverse 
racism,’ ‘reverse sexism,’ and 
‘cisphobia’ 

+ Reasonable communication 
of boundaries, such as “leave me 
alone,” “go away,” or “I’m not 
discussing this with you.” 

+ Communicating in a ‘tone’ 
you don't find congenial 

+ Criticizing racist, sexist, cis- 
sexist, or otherwise oppressive 
behavior or assumptions 

Consequences, Reporting 
and Enforcement on 
Processing Community Day 

Please contact Xin Xin, Dorothy 

Santos, Johanna Hedva, Lauren Mc- 

Carthy, Casey Reas, or Dan 

Shiffman listed on day.processing. 

org/people. This team of organ- 

izers will be trained in how to add- 
ress and report any incidents 
attendees bring to our attention. You 
may also contact us via email at 
day@processing.org. 

Participants asked to 

stop any harassing behavior are ex- 

pected to comply immediately. 

If a participant engages in harass- 

ing behavior, the PCD team 

may take action we deem appropri- 

ate, up to and including expul- 

sion from all PCD spaces (both on 

and offline) and identification 

of the participant as a harasser to oth- 

er PCD community members and/ 

or the general public. 
Acknowledgements 
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This policy is licensed under a Cre- 
ative Commons Attribution 

4.0 International license and on the 
Processing Community Day 
website. We encourage other orga- 
nizations to adopt (and enforce) 
similar Codes of Conduct by using 
and remixing this one. 

Step-by-Step Guide 
Visit discourse.processing. 
org. Introduce yourself on the PCD @ 
Worldwide thread. Create a dis- 
course thread for your city. Invite col- 
laborators to join the discussion. 
Schedule an IRL planning meetup. 

Find avenue 
We recommend collaborating with 
public facilities such as libraries, 
schools, or community-driven spac- 
es with good, stable WiFi such 
as community centers, art / culture 
venues, hackerspaces, cafes, 
tea houses, or bars. 

Pay attention to the 
infrastructure and amenities of the 
space: Does the venue have fast 
internet connection for your group 
size? Does it come with equip- 
ment such as a monitor or projector? 
Does it have a gender-neutral 
bathroom? Is it child-friendly? Is the 
space accessible for disabled 
folks? We recommend this checklist 
to ensure that you have an ac- 
cessible space. 

Secure a date & time to 

host PCD 
Find a date that works for your org- 
anizing team and the venue. Double 
check the calendar to make sure 
that it doesn’t clash with other popu- 
lar events in your communities. 

Organize your program 
Are you looking to organize a 
simple afternoon event or are you 
hoping to go further? We are 
currently unable to provide financial 
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assistance for the node events. If 
you are hoping to organize a 
larger event, are there any organiza- 
tions, institutions, or companies 
you might seek support from? How 
might receiving fundings from 
a company affect the content of your 
event? Can you use an organiza- 
tion’s help to create a more accessi- 
ble and inclusive space? 

Here are two PCD program- 


ming templates: 
4-hour Processing Com- 
munity Day 


+ Welcome & introduction (30 min) 
+ Beginner-friendly workshop 


pt. 1(90 min) Short break (15 min) 


+ Beginner-friendly workshop pt. 


2(30 min) Watch PCD @ LA lightning 
talks (30 min) Relaxed group dis- 
cussion over refreshment (30 min) 
Wrap-up: discuss ways for the 
community to go forward and group 
picture! (15 min) 

8-hour Processing Com- 

munity Day 


+ Welcome & introduction (30 min) 
+ Community show & tell (60 min) 
+ Beginner-friendly workshop | (120 


min) 


+ Lunch break (60 min) 
+ Guest lecture or Daniel Shiffman’s 


Coding Train Videos (30 min) 


+ Beginner-friendly workshop II pt. 1 


(90 min) Short break (15 min) 


+ Beginner-friendly workshop II pt. 2 


(30 min) Community discussion 

on topics related to art, code, 

and diversity. See PCD @ LA tracks 
for possible topics. (45 min) 


- Wrap-up: discuss ways for the com- 


munity to go forward and group 
picture! (15 min) 
Ticketing 


We do not manage or distribute tick- 
ets on behalf of our satellite 
PCD events. As an organizer, you will 


determine whether ticketing is a pre- 
ferable option for your event. 
We encourage all organizers who are 
planning to charge a fee for the 
event to provide affordable options 
to promote accessibility and 
inclusivity. 
Create an event 
webpage 
Create an event page on plat- 
forms such as Meetup or Eventbrite. 
Update event detail 
on our website 
Please visit the PCD @ World- 
wide Map Spreadsheet to update 
your event details. This is impor- 
tant since your conference guests 
might visit our website to find 
out details about your event. Please 
contact day@processing.org 
if you did not receive a link to the 
spreadsheet. 
Promotion 
Promo Package 
PCD @ Worldwide logos are created 
by Yuehao Jiang and can be 
downloaded online. The promo pack- 
age is licensed under a Creative 
Commons Attribution 4.0 Internation- 
allicense. Send us a copy if 
you end up remixing the graphics; 
we would love to see them! 
Online Promotion Checklist 
+ Press release (sample press re- 
lease onp. 280) 
+ Mailing lists 
+ Personal emails to friends and com- 
munities 
+ Social media - use hashtag 
#PCD2019 to connect with Pro- 
cessing Foundation and 
PCD communities around the world 
+ Blog posts - consider writing an 
in-depth post before / after PCD on 
platforms such as Medium to 
generate interest. 
+ Offline Promotion Checklist 
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+ Flyers 
+ Posters 
+ Stickers 

Share your PCD 
We would love to receive pictures 
and documentations from your 
planning meetings and your Proces- 
sing Community Day. Please 
share any materials you generate 
along the way with us via Twitter 
(@ProcessingOrg) or email (day@ 
processing.org). 

Sample Press Release 
July 12, 2018, For Immediate 
Release 

Join Processing Com- 
munity Day to Celebrate Art, Code, 
and Diversity 

Processing Foundation 
is pleased to announce Processing 
Community Day (PCD), a day 
to celebrate art, code, and diversity, 
held in Los Angeles and com- 
munities worldwide. 

PCD @ Los Angeles 
is an inclusive event that will bring 
together people of all ages to 
celebrate and explore art, code, and 
activism. The day-long event feat- 
ures four themed tracks — Accessibi- 
lity, Disability, and Care; Radical 
Pedagogy; Under the Silicon, the 
Beach!; and Epic Play! Each 
themed track contains lightning 
talks and sessions presented 
by conference guests we invite 
through an open call. 

Processing is a free and 
open-source software platform for 
code within the context of the vis- 
ual arts, created by Casey Reas and 
Ben Fry. Itis complemented by a 
web version, called p5.js, created by 
Lauren McCarthy. To date, Pro- 


cessing and p5.js are used by aworld- lightning talks and sessions present- 


wide community of artists, coders, 
educators, and students. 


Additional information on Process- 
ing Community Day can be found 
at day.processing.org., Xin Xin, Dir- 
ector & Lead Organizer, Proces- 
sing Community Day 2019, Tel: +1 
(323) 456-6613, day@proces- 
sing.org, @processingOrg. 


Sample Event Page 


Processing Community Day @ Los Angeles 


Sat, January 19, 2019 
10:00 AM - 9:00 PM PST 


r 
Epic Playl ‘th lightning talks 


oi ern 
and sessions presented by conference guests we invite 
through an open call, 


jing, we want to 
and projects 
yw & Tell Ste 


et UD 
nity Cafe, and a Community 


The Processing Community Day Los Angeles web 
banner with sample text over a gray background. 
Sample Event Page 
Processing Community Day @ Los 
Angeles, Sat, January 19, 
2019, 10:00 AM - 9:00 PM PST, 
UCLA Broad Art Center, 
240 Charles E Young Drive North, 
Los Angeles, CA 90095 
PCD @ Los Angeles is an 
inclusive event that will bring 
together people of all ages to cele- 
brate and explore art, code, 
and activism. The day-long event 
features four themed-tracks — 
Accessibility, Disability, and Care, 
Radical Pedagogy, Under the 
Silicon, the Beach!, and Epic Play!. 
Each themed track contains 


ed by conference guests we in- 
vite through an open call. 
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In addition to a full day of program- 
ming, we want to make space 

for anyone to share ideas and proj- 
ects with the community. We will 
set up Show & Tell Stations, a Pro- 
cessing Community Cafe, and 

a Community Open Mic Session for 
participants to sign up on the 

day of the event. The program will 
wrap up with an afterparty 
consisting of performances, food, 
and drinks. 

Tickets 
Early-bird ticketing will open on 
September 1, 2018. Regular ticket- 
ing and PCD Scholarship appli- 
cation opens on November 1, 2018. 
Sign up for our newsletter to re- 
ceive areminder. 

Every conference pass 
includes access to all lightning talks, 
entries to two workshops, perfor- 
mances, and the afterparty. The pack- 
age also includes a lunch box 
(vegetarian / vegan options avail- 
able), all-day coffee & snacks, 
and PCD / Processing / p5 combo 
stickers. 

Children under 12 will gain 
free entries to PCD @ Los Angel- 
es. Children’s diet varies widely at dif- 
ferent age, therefore we would like 
to ask you to either bring lunch boxes 
for your children on the day of the 
event, or order PCD @ Los Angeles’ 
children’s meals when purchas- 
ing your ticket. 

Accessibility 
Alllightning talks will include ASL 
interpretation and be livestreamed 
over the internet. Our venues are 
wheelchair-accessible, and we will 
provide reserved seatings for 
attendees with mobility devices. 
Once ticketing opens, please 
fill out our ticketing survey so that we 
can learn more about your needs. 
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Parking & Transportation 
The closest parking lot to UCLA 
Broad Art Center is Parking Struc- 
ture 3. Visitor parking is $12 per 
day, and accessible parking for indi- 
viduals with disabilities is $8 per 
day. We strongly recommend arrang- 
ing carpool, using a ridesharing 
service or public transportation to 
commute to the venue. 
PCD Scholarship 
We are currently fundraising for 
the scholarship and will be announc- 
ing application details on Nov- 
ember 1, 2018. PCD scholarship is 
made possible by PCD @ Los 
Angeles supporters and sponsors. 
Learn how you can support us. 
Beginner Workshop 
Examples 
Play with p5, Provided by Lauren 
McCarthy 
Setup (10 mins) 
1. We will be using a new p5.js 
web editor. You can find it at alpha. 
editor.p5js.org. 
2. Sign up for an account, and name 
and save your first project. 
3. You are ready to begin creating 
with p5,js! 
Experiment (45-90 mins) 
One way to start learning p5.js 
is just to play with it and see what 
patterns you notice. 
1. Try adding some of the lines of 
code from this list into the 
places where it says setup() and 
draw(). To do this, type the 
line as you see it, but replace each 
letter in pink with a number. 
Press the play button to run your 
code. Can you figure out what 
each of the lines does? 
2. Try changing the numbers to 
see what happens. Press play each 
time to run your code again. 
Can you figure out what the differ- 
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entletters stand for? 

3. Can you explain the differ- 
ence between putting code in 
setup() and putting code in 
draw()? 
createCanvas(w, h); 
ellipse(x, y, w, h); 
rect(x, y, w, h); 

2122 


line(x1, y1, x2, y2); 
triangle(x1, y1, x2, y2, x3, y3); 
fill(g), 
fill(r, g, b, a); 
stroke(r, g, b, a); 
strokeWeight(w); 
background(r, g, b, a); 
print(s); 
// these ones below get put inside 
of other functions above 
// as replacements for the letters 
mouseX 
mouseY 
random(max) 
second() 
4. After experimenting for a while 
individually, team up with 
a partner and see what youcan 
figure out with your know- 
ledge combined. 
5. Finally, get together with 
the entire group and walk through 
what each line does, and 
the questions above. The instruc- 
tor may lead this portion 
with their computer plugged into 
a projector. 
Sketch (30+ minutes) 
Taking what you learned in the 
previous activity, create a sketch of 
your own. One at atime, try to 
add the following: 
1. One element that is different 
every time you run the program. 
2. One element that changes 
with the mouse. 
3. One element that changes over 
time. 


The following resources may be 
helpful: 

+ pdjs.org - p5.js website, includes 
library, reference, examples, 
and tutorials 

+ p5js.org/reference - p5.js 
reference 

More Ideas 

+ Create a portrait of your neigh- 
bor. Use only 2D primitive shapes - 
arc(), curve(), ellipse(), line(), 
point(), quad(), rect(), triangle() - 
and basic color functions - 
background(), colorMode(), fill(), 
noFill(), noStroke(), stroke(). 
Remember to use createCanvas() 
to specify the dimensions of 
your canvas. 

+ Go for a walk and find an object 
that intrigues or inspires you. Repli- 
cate it with code. It canbe as 
realistic or abstract as you like. In- 
clude one element thatis differ- 
ent each time you load the sketch. 

+ Exquisite corpse. One person 
sets up a blank sketch with a can- 
vas. They add one line of code, 
hit play, and pass their laptop to the 
person next to them. The next 
person adds one line of code, hits 
play, and passes the laptop on. 
Repeat until it has gone all the way 
around the room. This can be 
done simultaneously with more than 
one laptop, so multiple composi- 
tions are created in parallel. It may 
help to arrange desks in acircle 
for easier passing. When laptops 
have returned to their original 
owners, place all laptops open on 
the desks. Participants may 
walk slowly in a circle around them 
to view the exquisite sketches. 

Going Further 

The following resources are 

helpful for learning more about p5.js 

and coding. 
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+ p5.js forum - good place for p5.js 
programming questions 
+ Daniel Shiffman’s Coding Train 
Videos - p5.js video tutorials 
+ Getting Started with p5.js - by Lau- 
ren McCarthy, Casey Reas, and 
Ben Fry 
+ Intro to Programming for the 
Visual Arts with p5,js - online class, 
free with sign up 
+ Open Processing - a website for 
sharing p5.js sketches, get- 
ting inspiration, and learning from 
others 
10PRINT Coding Challenge, Pro- 
vided by Dan Shiffman 
Inspired by the book 10 
PRINT CHR$(205.5+RND(1)); : 
GOTO 10 by Nick Montfort, Patsy 
Baudoin, John Bell, lan Bogost, 
Jeremy Douglass, Mark C. Marino, 
Michael Mateas, Casey Reas, 
Mark Sample, and Noah Vawter. This 
book is about a one-line Commo- 
dore 64 BASIC program, published 
in November 2012. Book purch- 
ases support the nonprofit organiza- 
tions The Electronic Literature 
Organization (to which all royalties 
are being donated) and The 
MIT Press, the book's publisher. 
http://10print.org 
Setup (10 mins) 
This tutorial uses the new p5.js 
web editor. You can find it at alpha. 
editor.p5js.org. Sign up for an 
account, and name and save your 
first project. Alternatively, you 
can use the Processing IDE. Down- 
load at https://processing.org/ 
download/. Launch and you are rea- 
dy to begin! You are ready to 
begin creating your own 10 PRINT 
design! 
Video (10 mins) 
The Coding Train YouTube chan- 
nel includes many coding challenge 


videos that walk through the process 
of creating a p5 (or Processing) 
sketch. In this activity we'll build off 
of the LOPRINT Coding Chal- 
lenge: https://youtu.be/bEyTZ5 
ZZxZs. 

You can also watch this vid- 
e0 to see the output of the origin- 
al Commodore 64 program: https:// 
youtu.be/m9joBLOZVEo. 

Sketch (30+ minutes) 
Open the code from the video. 
p5.js code: https://alpha.editor.p5js. 
org/codingtrain/sketches/ryx 
WYgmwx. Processing code: https:// 
goo.gl/k6q1L7. Ideas for varia- 
tions: What other shapes or colors 
can you draw instead of a line? 
What happens if you vary the proba- 
bility? What do you do when 
the design reaches the bottom of the 
page? Can you getit to scroll 
continuously? 
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Processing release 0001 was built August 9, 2001 and re- 
lease 1277 (4.0 beta 2) was built October 4, 2021, 

but the original Processing software is only the beginning 
of what has developed over the years. There are cur- 

rently over 40 active software repositories on the Proces- 
sing Github account with contributions from hun- 

dreds of people over the many years of development. The 
pages that follow document the release dates and 

version numbers for a selection of the Processing Founda- 
tion software releases. 


REL 
REL 
REL 
REL 
REL 
REL 


001 
002 
003 
004 
005 
006 


Processing, Recorded 2001-2021. 

p5.js, Recorded 2014-2021. 

p5.js Editor (v1), Recorded 2014-2016. 

p5.js Editor (v2), Recorded 2020-2021. 
p5.Sound, Recorded 2014-2021. 

Processing for Android, Recorded 2014-2021. 
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290 
290 
291 
291 


REL 


001-1 


001-2 


001-3 


001-4 


001-5 


001-6 


001-7 


001-8 


001-9 


001-10 


001-11 


001-12 


001-13 


001-14 


001-15 


001-16 


001-17 


001-18 


001-19 


001-20 


001-21 


001-22 


Processing, Recorded 


2001-2021. 

Date: Aug 9, 2001 
Version: 0001 
Date: Aug 10, 2001 
Version: 0002 
Date: Aug 10, 2001 
Version: 0003 
Date: Sep 12, 2001 
Version: 0004 
Date: Sep 17, 2001 
Version: 0005 
Date: Sep 17, 2001 
Version: 0006 
Date: Sep 19, 2001 
Version: 0007 
Date: Sep 26, 2001 
Version: 0008 
Date: Sep 28 2001 
Version: 0009 
Date: Nov 28, 2001 
Version: 0010 
Date: Nov 28, 2001 
Version: 0011 
Date: Nov 29, 2001 
Version: 0012 
Date: Unlisted 
Version: 0013 
Date: Dec 10, 2001 
Version: 0014 
Date: Dec 11, 2001 
Version: 0015 
Date: Jan 20, 2002 
Version: 0016 
Date: Jan 23, 2002 
Version: 0017 
Date: Feb 11, 2002 
Version: 0018 
Date: Feb 25, 2002 
Version: 0019 
Date: Unlisted 
Version: 0020 
Date: Apr 22, 2002 
Version: 0023 
Date: Apr 22, 2002 
Version: 0024 


001-23 


001-24 


001-25 


001-26 


001-27 


001-28 


001-29 


001-30 


001-31 


001-32 


001-33 


001-12 


001-13 


001-14 


001-15 


001-16 


001-17 


001-18 


001-19 


001-30 


001-31 


001-32 


001-33 


Date: Jun 6, 2002 
Version: 0025 
Date: Jun 7, 2002 
Version: 0026 
Date: Jun 7, 2002 
Version: 0027 
Date: Jul 1, 2002 
Version: 0028 
Date: Jul 1, 2002 
Version: 0029 
Date: Jul 2, 2002 
Version: 0030 
Date: Jul 5, 2002 
Version: 0031 
Date: Jul 7, 2002 
Version: 0032 
Date: Jul 8, 2002 
Version: 0033 
Date: Jul 22, 2002 
Version: 0034 
Date: Jul 23, 2002 
Version: 0035 
Date: Jul 27, 2002 
Version: 0036 
Date: Jul 27, 2002 
Version: 0037 
Date: Jul 30, 2002 
Version: 0038 
Date: Jul 31, 2002 
Version: 0039 
Date: Aug 1, 2002 
Version: 0040 
Date: Aug 1, 2002 
Version: 0041 
Date: Aug 2, 2002 
Version: 0042 
Date: Aug 2, 2002 
Version: 0043 
Date: Sep 2, 2002 
Version: 0044 
Date: Oct 20, 2002 
Version: 0045 
Date: Nov 20, 2002 
Version: 0046 
Date: Jan 5, 2003 
Version: 0047 
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001-34 
001-35 
001-36 
001-37 
001-38 
001-39 
001-40 
001-41 
001-42 
001-43 
001-44 
001-45 
001-46 
001-47 
001-48 
001-49 
001-50 
001-51 
001-52 
001-53 
001-54 
001-55 


001-56 


REL 


Date: Jan 7, 2003 
Version: 0048 
Date: Jan 26, 2003 
Version: 0049 
Date: Jan 27, 2003 
Version: 0050 
Date: Jan 31, 2003 
Version: 0051 
Date: Feb 2, 2004 
Version: 0068 
Date: Mar 28, 2004 
Version: 0069 
Date: Sep 29, 2004 
Version: 0070 
Date: Unlisted 
Version: 0071 
Date: Unlisted 
Version: 0072 
Date: Unlisted 
Version: 0073 
Date: Unlisted 
Version: 0074 
Date: Unlisted 
Version: 0075 
Date: Unlisted 
Version: 0076 
Date: Mar 1, 2005 
Version: 0077 
Date: Mar 30, 2005 
Version: 0078 
Date: Mar 31, 2005 
Version: 0079 
Date: Apr 2, 2005 
Version: 0080 
Date: Apr 4, 2005 
Version: 0081 
Date: Apr 6, 2005 
Version: 0082 
Date: Apr 17, 2005 
Version: 0083 
Date: Apr 19, 2005 
Version: 0084 
Date: Apr 19, 2005 
Version: 0085 
Date: May 1, 2005 
Version: 0086 


001 
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001-57 


001-58 


001-59 


001-60 


001-61 


001-62 


001-63 


001-64 


001-65 


001-66 


001-67 


001-68 


001-69 


001-70 


001-71 


001-72 


001-73 


001-74 


001-75 


001-76 


001-77 


001-78 


001-79 


Date: May 2, 2005 
Version: 0087 
Date: May 7, 2005 
Version: 0088 
Date: May 8, 2005 
Version: 0089 
Date: May 9, 2005 
Version: 0090 
Date: Jun 6, 2005 
Version: 0091 
Date: Jun 30, 2005 
Version: 0092 
Date: Oct 14, 2005 
Version: 0093 
Date: Oct 31, 2005 
Version: 0094 
Date: Nov 2, 2005 
Version: 0095 
Date: Nov 26, 2005 
Version: 0096 
Date: Nov 29, 2005 
Version: 0097 
Date: Dec 1, 2005 
Version: 0098 
Date: Dec 18, 2005 
Version: 0099 
Date: Jan 13, 2006 
Version: 0100 
Date: Jan 14, 2006 
Version: 0101 
Date: Jan 15, 2006 
Version: 0102 
Date: Jan 18, 2006 
Version: 0103 
Date: Feb 27, 2006 
Version: 0104 
Date: Feb 27, 2006 
Version: 0105 
Date: Mar 1, 2006 
Version: 0106 
Date: Mar 2, 2006 
Version: 0107 
Date: Mar 15, 2006 
Version: 0108 
Date: Mar 21, 2006 
Version: 0109 
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001-80 Date: Mar 22, 2006 
Version: 0110 
001-81 Date: Mar 28, 2006 
Version: 0111 
001-82 Date: Apr 13, 2006 
Version: 0112 
001-83 Date: Apr 14, 2006 
Version: 0113 
001-84 Date: Apr 19, 2006 
Version: 0114 
001-85 Date: May 11, 2006 
Version: 0115 
001-86 Date: Sep 26, 2006 
Version: 0116 
001-87 Date: Oct 1, 2006 
Version: 0117 
001-88 Date: Oct 1, 2006 
Version: 0118 
001-89 Date: Oct 10, 2006 
Version: 0119 
001-90 Date: Nov 5, 2006 
Version: 0120 
001-91 Date: Nov 6, 2006 
Version: 0121 
001-92 Date: Nov 28, 2006 
Version: 0122 
001-93 Date: Nov 30, 2006 
Version: 0123 
001-94 Date: Feb 4, 2007 
Version: 0124 
001-95 Date: Jul 15, 2007 
Version: 0125 
001-96 Date: Oct 9, 2007 
Version: 0126 
001-97 Date: Oct 14, 2007 
Version: 0127 
001-98 Date: Oct 16, 2007 
Version: 0128 
001-99 Date: Oct 18, 2007 
Version: 0129 
001-100 Date: Oct 20, 2007 
Version: 0130 
001-101 Date: Oct 22, 2007 
Version: 0131 
001-102 Date: Oct 22, 2007 
Version: 0132 


001-103 Date: Oct 26, 2007 
Version: 0133 
001-104 Date: Nov 17, 2007 
Version: 0134 
001-105 Date: Nov 21, 2007 
Version: 0135 
001-106 Date: May 29, 2008 
Version: 0136 
001-107 Date: May 30, 2008 
Version: 0137 
001-108 Date: May 31, 2008 
Version: 0138 
001-109 Date: Jun 4, 2008 
Version: 0139 
001-110 Date: Jun 10, 2008 
Version: 0140 
001-111 Date: Jun 11, 2008 
Version: 0141 
001-112 Date: Jun 16, 2008 
Version: 0142 
001-113 Date: Jun 28, 2008 
Version: 0143 
001-114 Date: Aug 9, 2008 
Version: 0144 
001-115 Date: Aug 15, 2008 
Version: 0145 
001-116 Date: Aug 16, 2008 
Version: 0146 
001-117 Date: Aug 18, 2008 
Version: 0147 
001-118 Date: Aug 19, 2008 
Version: 0148 
001-119 Date: Oct 15, 2008 
Version: 0149 
001-120 Date: Oct 15, 2008 
Version: 0150 
001-121 Date: Oct 17, 2008 
Version: 0151 
001-122 Date: Oct 19, 2008 
Version: 0152 
001-123 Date: Oct 21, 2008 
Version: 0153 
001-124 Date: Oct 21, 2008 
Version: 0154 
001-125 Date: Nov 4, 2008 
Version: 0155 
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001-126 Date: Nov 10, 2008 
Version: 0156 
001-127 Date: Nov 18, 2008 
Version: 0157 
001-128 Date: Nov 22, 2008 
Version: 0158 
001-129 Date: Nov 24, 2008 
Version: 1.0 
001-130 Date: Nov 29, 2008 
Version: 1.0.1 
001-131 Date: Feb 21, 2009 
Version: 1.0.2 
001-132 Date: Feb 24, 2009 
Version: 1.0.3 
001-133 Date: May 31, 2009 
Version: 1.0.3 
001-134 Date: Jun 7, 2009 
Version: 1.0.5 
001-135 Date: Aug 12, 2009 
Version: 1.0.6 
001-136 Date: Sep 4, 2009 
Version: 1.0.7 
001-137 Date: Oct 18, 2009 
Version: 1.0.8 
001-138 Date: Oct 20, 2009 
Version: 1.0.9 
001-139 Date: Mar 11, 2010 
Version: 1.1 
001-140 Date: Jul 13, 2010 
Version: 1.2 
001-141 Date: Jul 14, 2010 
Version: 1.2.1 
001-142 Date: Apr 17, 2011 
Version: 1.5 
001-143 Date: May 15, 2011 
Version: 1.5.1 
001-144 Date: Oct 31, 2011 
Version: 2.0a2 
001-145 Date: Nov 5, 2011 
Version: 2.0a3 
001-146 Date: Nov 10, 2011 
Version: 2.0a4 
001-147 Date: Mar 23, 2012 
Version: 2.0a5 
001-148 Date: Jun 1, 2012 
Version: 2.0a6 


001-149 Date: Jul 29, 2012 
Version: 2.0a7 
001-150 Date: Aug 5, 2012 
Version: 2.0a8 
001-151 Date: Sep 1, 2012 
Version: 2.0a9 
001-152 Date: Sep 3, 2012 
Version: 2.0b1 
001-153 Date: Sep 7, 2012 
Version: 2.0b2 
001-154 Date: Sep 10, 2012 
Version: 2.063 
001-155 Date: Oct 21, 2012 
Version: 2.0b4 
001-156 Date: Oct 22, 2012 
Version: 2.065 
001-157 Date: Nov 2, 2012 
Version: 2.066 
001-158 Date: Dec 7, 2012 
Version: 2.0b7 
001-159 Date: Feb 24, 2013 
Version: 2.068 
001-160 Date: May 18, 2013 
Version: 2.069 
001-161 Date: Jun 3, 2013 
Version: 2.0 
001-162 Date: Jun 21, 2013 
Version: 2.0.1 
001-163 Date: Jun 21, 2013 
Version: 2.0.2 
001-164 Date: Sep 5, 2013 
Version: 2.0.3 
001-165 Date: Oct 20, 2013 
Version: 2.1 beta 1 
001-166 Date: Oct 27, 2013 
Version: 2.1 
001-167 Date: Jan 21, 2014 
Version: 2.1.1 
001-168 Date: Apr 15, 2014 
Version: 2.1.2 
001-169 Date: May 12, 2014 
Version: 2.2 
001-170 Date: May 19, 2014 
Version: 2.2.1 
001-171 Date: Jul 16, 2014 
Version: 3.0a1 
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001-172 Date: Jul 31, 2014 
Version: 3.0a2 
001-173 Date: Aug 26, 2014 
Version: 3.0a3 
001-174 Date: Sep 12, 2014 
Version: 3.0a4 
001-175 Date: Nov 16, 2014 
Version: 3.0a5 
001-176 Date: Apr 25, 2015 
Version: 3.0a6 
001-177 Date: Apr 26, 2015 
Version: 3.0a7 
001-178 Date: May 17, 2015 
Version: 3.0a8 
001-179 Date: May 19, 2015 
Version: 3.0a9 
001-180 Date: Jun 9, 2015 
Version: 3.0a10 
001-181 Date: Jul 16, 2015 
Version: 3.0a11 
001-182 Date: Aug 6, 2015 
Version: 3.0b1 
001-183 Date: Aug 9, 2015 
Version: 3.0b2 
001-184 Date: Aug 11, 2015 
Version: 3.0b3 
001-185 Date: Aug 17, 2015 
Version: 3.0b4 
001-186 Date: Aug 24, 2015 
Version: 3.0b5 
001-187 Date: Sep 11, 2015 
Version: 3.0b6 
001-188 Date: Sep 22, 2015 
Version: 3.0b7 
001-189 Date: Sep 30, 2015 


Version: 3.0 
001-190 Date: Oct 23, 2015 
Version: 3.0.1 
001-191 Date: May 8, 2016 
Version: 3.1 
001-192 Date: May 6, 2016 
Version: 3.1.1 
001-193 Date: Jul 29, 2016 
Version: 3.1.2 
001-194 Date: Aug 16, 2016 
Version: 3.2 
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001-195 Date: Oct 30, 2016 
Version: 3.2.2 
001-196 Date: Nov 7, 2016 
Version: 3.2.3 
001-197 Date: Jan 29, 2017 
Version: 3.2.4 
001-198 Date: Feb 12, 2017 
Version: 3.3 
001-199 Date: Apr 23, 2017 
Version: 3.3.1 
001-200 Date: Apr 25, 2017 
Version: 3.3.2 
001-201 Date: May 2, 2017 
Version: 3.3.3 
001-202 Date: Jun 3, 2017 
Version: 3.3.4 
001-203 Date: Jun 23, 2017 
Version: 3.3.5 
001-204 Date: Sep 4, 2017 
Version: 3.3.6 
001-205 Date: Mar 13, 2018 
Version: 3.3.7 
001-206 Date: Jul 26, 2018 
Version: 3.4 
001-207 Date: Jan 20, 2019 
Version: 3.5 
001-208 Date: Jan 21, 2019 
Version: 3.5.1 
001-209 Date: Jan 22, 2019 
Version: 3.5.2 
001-210 Date: Feb 3, 2019 
Version: 3.5.3 
001-211 Date: Jan 17, 2020 
Version: 3.5.4 


001-212 Date: 18 January 2019 


Version: 4.0 alpha 1 


001-213 Date: 15 September 2020 


Version: 4.0 alpha 2 


001-214 Date: 17 January 2021 


Version: 4.0 alpha 3 
001-215 Date: 15 June 2021 
Version: 4.0 alpha 4 
001-216 Date: 24 June 2021 
Version: 4.0 alpha 5 
001-217 Date: 10 July 2021 
Version: 4.0 alpha 6 
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001-218 Date: 9 August 2021 
Version: 4.0 beta 1 

001-219 Date: 4 October 2021 
Version: 4.0 beta 2 


REL p5.js, Recorded 
2014-2021. 
002-1 Date: Jul 21,2014 
Version: 0.2.22 
002-2 Date: Jul 31,2014 
Version: 0.2.23 
002-3 Date: Aug 6, 2014 
Version: 0.3.0 (first 
public beta release) 
002-4 Date: Aug 8, 2014 
Version: 0.3.2 
002-5 Date: Aug 17, 2014 
Version: 0.3.3 
002-6 Date: Aug 26, 2014 
Version: 0.3.4 
002-7 Date: Aug 28, 2014 
Version: 0.3.5 
002-8 Date: Sep 11,2014 
Version: 0.3.6 
002-9 Date: Sep 19, 2014 
Version: 0.3.7 
002-10 Date: Sep 25, 2014 
Version: 0.3.8 
002-11 Date: Oct 10, 2014 
Version: 0.3.9 
002-12 Date: Nov 3, 2014 
Version: 0.3.11 
002-13 Date: Nov 23, 2014 
Version: 0.3.12 
002-14 Date: Dec 4, 2014 
Version: 0.3.13 
002-15 Date: Dec 10,2014 
Version: 0.3.14 
002-16 Date: Dec 23, 2014 
Version: 0.3.15 
002-17 Date: Jan 8, 2015 
Version: 0.3.16 
002-18 Date: Feb 2, 2015 
Version: 0.4.0 
002-19 Date: Feb 13,2015 
Version: 0.4.1 


002-20 Date: Feb 16,2015 
Version: 0.4.2 
002-21 Date: Mar 30, 2015 
Version: 0.4.3 
002-22 Date: Apr12, 2015 
Version: 0.4.4 
002-23 Date: May 27,2015 
Version: 0.4.5 
002-24 Date: Jun 24, 2015 
Version: 0.4.6 
002-25 Date: Jul17, 2015 
Version: 0.4.7 
002-26 Date: Aug 18, 2015 
Version: 0.4.8 
002-27 Date: Aug 31, 2015 
Version: 0.4.9 
002-28 Date: Sep 12,2015 
Version: 0.4.10 
002-29 Date: Sep 14, 2015 
Version: 0.4.11 
002-30 Date: Sep 15, 2015 
Version: 0.4.12 
002-31 Date: Sep 20, 2015 
Version: 0.4.13 
002-32 Date: Oct 5, 2015 
Version: 0.4.14 
002-33 Date: Oct 6, 2015 
Version: 0.4.15 
002-34 Date: Oct 12,2015 
Version: 0.4.16 
002-35 Date: Oct 13,2015 
Version: 0.4.17 
002-36 Date: Nov 9, 2015 
Version: 0.4.18 
002-37 Date: Nov 11,2015 
Version: 0.4.19 
002-38 Date: Dec 11,2015 
Version: 0.4.20 
002-39 Date: Jan 4, 2016 
Version: 0.4.21 
002-40 Date: Feb 4, 2016 
Version: 0.4.22 
002-41 Date: Mar 4, 2016 
Version: 0.4.23 
002-42 Date: Apr 25, 2016 
Version: 0.4.24 
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002-43 


002-44 


002-45 


002-46 


002-47 


002-48 


002-49 


002-50 


002-51 


002-52 


002-53 


002-54 


002-55 


002-56 


002-57 


002-58 


002-59 


002-60 


002-61 


002-62 


002-63 


002-64 


002-65 


Date: May 2, 2016 
Version: 0.5.0 
Date: Jun 10, 2016 
Version: 0.5.1 
Date: Jun 16, 2016 
Version: 0.5.2 
Date: Aug 17, 2016 
Version: 0.5.3 
Date: Oct 1, 2016 
Version: 0.5.4 
Date: Dec 5, 2016 
Version: 0.5.5 
Date: Jan 3, 2017 
Version: 0.5.6 
Date: Feb 8, 2017 
Version: 0.5.7 
Date: Mar 25, 2017 
Version: 0.5.8 
Date: May 10, 2017 
Version: 0.5.9 
Date: May 18, 2017 
Version: 0.5.10 
Date: Jun 1, 2017 
Version: 0.5.11 
Date: Aug 11, 2017 
Version: 0.5.12 
Date: Aug 25, 2017 
Version: 0.5.13 
Date: Aug 28, 2017 
Version: 0.5.14 
Date: Oct 9, 2017 
Version: 0.5.15 
Date: Oct 11, 2017 
Version: 0.5.16 
Date: Jan 19, 2018 
Version: 0.6.0 
Date: Apr 27, 2018 
Version: 0.6.1 
Date: Aug 9, 2018 
Version: 0.7.0 
Date: Aug 10, 2018 
Version: 0.7.1 
Date: Sep 2, 2018 
Version: 0.7.2 
Date: Jan 20, 2019 
Version: 0.7.3 
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002-67 


002-68 


002-69 


002-70 


002-71 


002-72 


002-73 


002-74 


002-75 


002-76 


002-77 
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REL 


003-1 


003-2 


003-3 


003-4 


003-5 


003-6 


003-7 


Date: Apr 8, 2019 
Version: 0.8.0 
Date: Jul 1, 2019 
Version: 0.9.0 
Date: Oct 14, 2019 
Version: 0.10.0 
Date: Oct 14, 2019 
Version: 0.10.2 
Date: Feb 29, 2020 
Version: 1.0.0 
Date: Jul 22, 2020 
Version: 1.1.3 
Date: Jul 22, 2020 
Version: 1.1.4 
Date: Jul 22, 2020 
Version: 1.1.5 
Date: Jul 22, 2020 
Version: 1.1.7 
Date: Jul 22, 2020 
Version: 1.1.9 
Date: Dec 20, 2020 
Version: 1.2.0 
Date: Mar 9, 2021 
Version: 1.3.0 
Date: Mar 28, 2021 
Version: 1.3.1 
Date: Jun 29, 2021 
Version: 1.4.0 


p5.js Editor (v1), Recorded 


2014-2016. 
Date: Jul 29, 2014 
Version: 0.1.0 


(p5.js IDE pre-release) 


Date: Jul 30, 2014 
Version: 0.1.1 
Date: Jul 31, 2014 
Version: 0.1.3 
Date: Jul 31, 2014 
Version: 0.1.4 
Date: Aug 3, 2014 
Version: 0.1.6 
Date: Aug 11, 2014 
Version: 0.1.7 
Date: Sep 18, 2014 
Version: 0.1.8 
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003-8 

003-9 

003-10 
003-11 
003-12 
003-13 
003-14 
003-15 
003-16 
003-17 
003-18 
003-19 
003-20 


003-21 


REL 


004-1 
004-2 
004-3 
004-4 
004-5 
004-6 


004-7 


REL 


Date: May 30, 2015 
Version: 0.3.0 
Date: Jul 11, 2015 
Version: 0.3.1 
Date: Jul 13, 2015 
Version: 0.3.2 
Date: Aug 5, 2015 
Version: 0.4.0 
Date: Aug 31, 2015 
Version: 0.5.0 
Date: Sep 2, 2015 
Version: 0.5.1 
Date: Nov 2, 2015 
Version: 0.5.6 
Date: Dec 11, 2015 
Version: 0.5.7 
Date: Mar 4, 2016 
Version: 0.5.8 
Date: Mar 4, 2016 
Version: 0.5.9 
Date: Mar 14, 2016 
Version: 0.5.10 
Date: Jun 21, 2016 
Version: 0.6.0 
Date: Aug 18, 2016 
Version: 0.6.1 
Date: Nov 10, 2016 
Version: 0.6.2 


p5.js Editor 

(v2), Recorded 
2020-2021. 

Date: May 26, 2020 
Version: v1.0.0 
Date: May 26, 2020 
Version: v1.0.1 
Date: Jun 1, 2020 
Version: v1.0.2 
Date: Jun 10, 2020 
Version: v1.0.3 
Date: Jul 13, 2020 
Version: v1.0.4 
Date: Jul 13, 2020 
Version: v1.0.5 
Date: Jul 13, 2020 
Version: 1.0.5 
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004-8 


004-9 


004-10 


004-11 


004-12 


004-13 


004-14 


004-15 


004-16 


004-17 


004-18 


004-19 


004-20 


004-21 


004-22 


004-23 


004-24 


004-25 


REL 


005-1 


005-2 


005-3 


Date: Jul 20, 2020 
Version: v1.0.6 
Date: Aug 6, 2020 
Version: v1.0.7 
Date: Sep 11, 2020 
Version: v1.0.8 
Date: Sep 29, 2020 
Version: v1.1.0 
Date: Sep 29, 2020 
Version: v1.1.1 
Date: Nov 17, 2020 
Version: v1.2.0 
Date: Nov 17, 2020 
Version: v1.2.1 
Date: Nov 17, 2020 
Version: v1.2.2 
Date: Mar 5, 2021 
Version: v1.3.0 
Date: May 7, 2021 
Version: v1.4.0 
Date: Jun 14, 2021 
Version: v1.4.1 
Date: Jun 28, 2021 
Version: v1.4.2 
Date: Jul 11, 2021 
Version: v2.0.0 
Date: Jul 12, 2021 
Version: v2.0.1 
Date: Jul 15, 2021 
Version: v2.0.2 
Date: Sep 8, 2021 
Version: v2.0.3 
Date: Oct 5, 2021 
Version: v2.1.0 
Date: Oct 8, 2021 
Version: v2.1.1 


p5.Sound, 
2014-2021. 

Date: Aug 22, 2014 
Version: 0.14 

Date: Feb 4, 2016 
Version: 0.14 

Date: Feb 28, 2017 
Version: 0.3.5 
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005-4 


005-5 


005-6 


005-7 


005-8 


005-9 


REL 


006-1 


006-2 


006-3 


006-4 


006-5 


006-6 


006-7 


006-8 


006-9 


006-10 


Date: Jul 15, 2018 
Version: 0.3.8 
Date: Sep 8, 2018 
Version: 0.3.9 
Date: Jan 10, 2019 
Version: 0.3.10 
Date: Apr 1, 2020 
Version: 0.3.12 
Date: May 25, 2021 
Version: 1.0.0 
Date: May 25, 2021 
Version: 1.0.1 


Processing for Android, 
Recorded 2014-2021. 


Date: Sep 11, 2014 
Version: Android 
ode 0228 

ate: Nov 5, 2014 
ersion: Android 
ode 0232 

Date: Jul 12, 2015 
Version: Android 
ode 0238 

Date: Jul 17, 2015 
Version: Android 
ode 0239 

Date: Aug 20, 2015 
Version: Android 
ode 0241 

Date: Aug 25, 2015 
Version: Android 
ode 0242 

Date: Sep 12, 2015 
Version: Android 
Mode 0243 

Date: Sep 26, 2015 
Version: Android 
Mode 0244 

Date: Oct 4, 2015 
Version: Android 
Mode 0245 

Date: Nov 2, 2015 
Version: Android 
Mode 0246 
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Date: Mar 5, 2016 
Version: Android 
Mode 0247 

Date: Apr 5, 2016 
Version: Android 
Mode 0248 

Date: Apr 16, 2016 
Version: Android 
Mode 0249 

Date: May 9, 2016 
Version: Android 
Mode 0250 

Date: Jun 10, 2016 
Version: Android 
Mode 0251 

Date: Jun 10, 2016 
Version: Android 
Mode 0254 

Date: Jul 20, 2016 
Version: Android 
Mode 0252 

Date: Jul 22, 2016 
Version: Android 
Mode 0255 

Date: Dec 30, 2016 
Version: Android 
Mode 0253 

Date: Jan 4, 2017 
Version: Android 
Mode 0256 

Date: Feb 10, 2017 
Version: Android 
Mode 0257 

Date: Mar 9, 2017 
Version: Android 
Mode 0258 

Date: Apr 4, 2017 
Version: Android 
Mode 0259 

Date: Apr 11, 2017 
Version: Android 
Mode 0260 

Date: May 6, 2017 
Version: Android 
ode 0261 
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Date: May 26, 2017 
Version: Android 
ode 0262 

Date: Jul 15, 2017 
ersion: Android 
ode 0263 

Date: Aug 6, 2017 
ersion: Android 
ode 0264 

Date: Aug 12, 2017 
ersion: Android 
ode 0265 

Date: Aug 21, 2017 
ersion: Android 
ode 0266 

Date: Sep 1, 2017 
ersion: Android 
ode 0267 

Date: Jan 28, 2018 
ersion: Android 
ode 0268 

Date: Jun 19, 2018 
ersion: Android 
ode 0269 

Date: Aug 16, 2018 
Version: Android 
ode 0270 

Date: Dec 28, 2018 
Version: Android 
ode 0271 

Date: Jan 5, 2019 
Version: Android 
ode 0272 

Date: Feb 15, 2019 
Version: Android 
ode 0273 

Date: Jun 2, 2019 
Version: Android 
ode 0274 

Date: Jul 1, 2019 
Version: Android 
ode 0275 

Date: Oct 29, 2019 
Version: Android 
ode 0276 
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006-42 


006-43 


006-44 


006-45 


006-46 


Date: Nov 4, 2019 
Version: Android 
Mode 0277 

Date: Jan 3, 2021 
Version: Android 
Mode 0278 

Date: Apr 29, 2021 
Version: Android 
Mode 0279 

Date: Apr 29, 2021 
Version: 4.2.1 

Date: Aug 12, 2021 
Version: 4.5.0 Alpha 1 
Date: Aug 18, 2021 
Version: 4.5.0 Alpha 2 
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Processing 
Community Day 
a@ Santiago, 2019, , 


A a_i 
Ae dew. eh ETT « 


ae ji a | 


Under a festive, colorful and eye 
catching visual identity the chilean 
community gathered in a 1 day event 
divided into two parts: classes in the 
morning and talks in the afternoon. 
Students printed posters with their 
work and we distributed merchandizing 
that included code samples to test at 
home. Processing Community Day Santiago 
was an example that working with code 
is a collective work that is only 
possible if everyone participates. 


é sy Organization 
Processing Alfredo Duarte 


| 5 , Introducoién a 
cata! Processing Processing: 


Community 1 Sones Production Team 

es Felicidad: Antonia Berger, 
Veronica Calderon, 
Christopher Cea, Tamara 
Garcia, Victoria Gallardo, 
Isidora Jimenez, Consuelo 
Kehr, Josefa Labarca, Felipe 
Lozano, Jorge Navajas, 
Valentina Rubio. 


Workshops 
Nicolas Troncos, Ricardo Vega 


Speakers 

Roy McDonald, Juan De 
Magalhaes, Nicolas Troncoso, 
Pao olea, Javier Garay, 
Enrique Rivera 
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Arianna Agudio 
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TANVE AGERWAL CON 007 322 ARIANNA AGUDIO CON 008 323 


Quantum Field Theory (MSAFluid) 
Memo Akten, 2007 
Made with processing 
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Nimiia Ceétii 

A collaboration between Jenna Sutela, Memo Akten, & Damien Henry from Google Arts & Culture, with support from Somerset House Studios, 2018. 
Inspired by experiments in interspecies communication and aspiring to connect with a world beyond our consciousness, Nimiia Cétii documents 
the interactions between a neural network, audio recordings of early Martian language, & footage of the movements of extremophilic bacteria. 
Made with p5js 
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String Theory (MSAFluid) 
Memo Akten, 2009 
Made with processing 


MEMO AKTEN, @MEMOT CON 009 


Spaceship Edition of the 


ENGINE OF ENDLESS 
EXPLORATIONS 


Spacaship Eéltion of the 
ENGINE OF ENDLESS 
EXPLORATIONS 


SAAD @HINDGALSAAD 


leyPres 


In the past decade 

emergent area of creative practice. of designing 
individual objects, systems are programmed with rule-bas 
controls to iterate over potential outcomes, The: 

utilize random generation within fixed parar 

pro ally er ndless explora of the form they 
are designed to make 


his thesis investigates the potential of code as a tool for 
personal creative practice, specifically for generative graphic 
illustrations and form-making, This edition represents the 
variations of spaceships, made from geometric shapes, 
inspired by the space race illustrations of the 1950s and 60s. 
The iterative capacity of the procedural engine mirrors the 
human ambition that fueled that era's explorations. 


The intent for creating spa 

playfully engage with the pot 

and ta spark their imagination and curic 
space exploration 


The structure of the code is based on a 
class system that stacks modular shapes 
1o create endless iterations. 


generative system built in Processing 
project by @hindgalsaad 
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Recoded by Juan Alonso (@kokuma) for 
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mt. CreativeCodingMadrid’s recode project. 
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welcome to 


PCD TOWN 


what is a website but a space that 
someone occupies where it is only 
natural for us to scroll & click & 
hover. this is an experiment that 
imagines how it would be if we were 
to walk & jump & run 


this space is also made in the hopes 
of making it a little easier for people in 
this wonderful community to get to 
know each other, and find people 
with similar interests, hopefully in a 
fun way! 


This is perfect. 
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Goria aviliibe daevess, Gloria will be famous 
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Rules of Six 


Rules of Six is an installation commissioned as part of the Design and Elastic Mind exhibi- 
CONFIDENCE: Liliane! CONTHIBEGEE|-llkigab! 5 tion at the Museum of Modern Art in New York curated by Paola Antonelli 2008. In collab- 
ie i ’ oration with material scientist Matthew Scullin, the project explores the notion of self-as- 
sembly, where top-down methods for determining form are replaced by bottom up rules of 
formation; where new material structures are not carved or composed by conventional tools 
but are “grown” through simple interactions between components or molecules. At the heart 


a of the project is a custom piece of software written Processing that simulates formation over 
if 


ve . i ney time in the same way molecules assemble themselves in the lab. Three-dimensional output 
CONBRENGE: Kile ; from this application was used to produce a large-scale wall relief mounted in the gallery. 
BONFIDENG Like the nanostructures it emulates, Rules of Six is designed to multiply indefinitely without 
sacrificing stability. It is indifferent to scale; its sprawling construction could represent 


molecules, rooms, buildings or entire neighborhoods. 


Photo Credit: Alex Terzich 
var confidence = []; 


var currentConfidence; confidence . push (name 


+ 
confidence .push(name + 
confidence push(name + 
confidence .push(name + 
x 
o 
fe 


//add affirmations to the confidence array you're brilliant!") 


confidence. push (name + ", your art is good!") joule rpesteceli) 
confidence.push(name + " deserves a million twitter followers!") Ronnaencel man neas ote imarevancnicl marr arena tata) 
confidence.push("oh " + name + ", you're the best!") Senneneat can (hone aes tenncornes) 

confidence.push(name +", you're doing the right thing") 


confidence.push(name + ", confidence now.") 
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Bloom Echo is 
ok a generative sound toy. 
Bon Play with it to chill out 
fe St and make blooming, 
éj Bs undulating beats, 
r OO. or turn on auto + slow 
G +2 mode to meditate. 
iS 
s ra) Or do both and interact 
‘ 5 in auto mode to 
5 4 ro} create music with 
1) ° ry 
% H = S your computer. 
ey (9) 
i we 8 ‘e) ° Time spent 
5 te jee C fo) with Bloom Echo 
o e is reflected in 
@ 
850 a constantly shifting 
H generative image 
on screen. 
e 
ee e Made by Aranya 
e Q ) (Ritesh Lala) 
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Abstract Perlin Fields 
joey aronson 2021 

colorful orbs generated using perlin noise rendered with proccesing3 


\ i \ each orb has a render time of about 6 hours 
LOLO ARMDZ (@ARMDZ) CON 027 342 
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eee © < > O a @ api.artblocks.io/project/O @ hy + Q 


Script: 
let numHashes = tokenData-hashes.length; 
let hashPairs = []; 
for (let i= 0; i < numHashes; i++) 
for (let j j < 32; j4t) ( 
hashPairs.push(tokenData.hashes[i].slice(2 + (j * 2), 4+ (Jj * 2))) 
Ip 
y 
let decPairs = hashPairs.map(x => { 
return parseInt(x, 16); 
ye 
let seed = parseInt(tokenData.hashes[0].slice(0, 16), 16)? 
let color; 
let backgroundIndex = 0; 
let backgroundarray = [255, 225, 200, 175, 150, 125, 100, 75, 50, 25, 0, 25, 50, 75, 100, 125, 150, 175, 200, 225]; 
let index = 0; 
let ht; 
let wt = 
let speed = 1; 
let segments; 
let amp = 1; 
let direction = 1; 
let loops = false; 
let startColor = decPairs(29); 
let reverse = decPairs[30] < 12! 
let slinky = decPairs[31] < 35; 
let pipe = decPairs[22] < 32; 
let bold = decPairs[23] < 15; 
let segmented = decPairs(24) < 30; 
let fuzzy = pipe && !slinky; 


function setup() { 


} 


let portrait = windowWidth < windowHeight; 

createCanvas(windowWidth > windowHeight * 3 / 2 ? windowHeight * 3 / 2 : windowWidth, windowWidth > windowHeight * 3 / 2 ? windowHeight : wi 
var el = document .getBlementsByTagName( "canvas" )(0}; 

el.addEventListener("touchstart", mouseClicked, false); 

colorMode(HSB, 255); 

segments = map(decPairs[26], 0, 255, 12, 20) 

ht = map(decPairs(27], 0, 255, 3, 4) 

spread = decPairs(28] < 3 ? 0.5 : map(decPairs(28}, 0, 255, 5, 50); 

strokeWeight (height / 1200); 


function draw() { 


color = 0; 

background (backgroundArray [backgroundIndex ]); 

let div = Math. floor(map(Nath.round(decPairs[24]), 0, 230, 3, 20))+ 

let steps = slinky ? 50 : fuzzy ? 1000 : 20 

translate((width / 2) - (width / wt / 2), height / 2); 

for (let j = 0; j < segments - 2; j++) { 

for (let i = 0; i <= steps; i++) { 

let t =i / steps; 
let x = curvePoint(width / segments / wt * j, width / segments / wt * (j + 1), width / segments / wt * (j + 2), width / segments / 
let y = curvePoint(map(decPairs[j], 0, 255, -height / ht, height / ht) * amp, map(decPairs(j +1], 0, 255, -height / ht, height / 
let hue = reverse ? 255 - (((color / spread) + startColor + index) % 255) : (((color / spread) + startColor) + index) % 255; 


if (fuzzy) { 
noStroke( ) ; 
fill(hue, 255, 255, 20); 
let fuzex = x + map(rnd(), 0, 1, 0, height / 10); 
let fuzzy = y + map(rnd(), 0, 1, 0, height / 10); 
if (dist(x, y, fu22X, fuz2Y) < height / 11.5) { 
circle(fuzzX, fuzzY, map(rnd(), 0, 1, height / 160, height / 16)) 
} 


) else { 
ig (slinky && pipe) { 
if (i == 0 || i == steps - 1) { 
£411(0); 
} else { 
nOFill()+ 
H 


stroke(0); 
circle(x, y, (height / 7)) 
} 


if (slinky) { 


if (i == 0 [| i == steps - 1) { 
fill(hue, 255, 255); 
} else { 
noFill(); 
By 
stroke(hue, 255, 255): 
} else { 
noStroke(); 


fill(hue, 255, 255); 
} 


circle(x, y, bold s& !slinky ? height / 5 : height / 13); 


if (segmented && !slinky && !bold) { 
if (i @ div === 0 || i == 0 || i == steps - 1) ( 
noStroke(); 
fi11(decPairs(25]); 
circle(x, y, height / 12); 
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Valentine_Cat 


fl size (500, 400); 


rectMode (CENTER); 
Ba fi 11(#C21CD8) ; 
BI rect(250, 200, 30, 109); 
a filL(#C21CD8) ; 


ey ellipse(250, 100, 100, 100); 


TE Line(250, 50, 230, 30); 

ee Line(220, 60, 230, 30); 

ME line(280, 30, 290, 67); e 

Ai line(280, 30, 270, 55 ); 
fi LL(#5DD81C) ; 

Hy cllipse(230, 100, 30, 30); 

m fi11(#110548) ; 

Al cllipse(230, 100, 10, 10); 
fi LL(#SDD81C) ; 
ellipse(270, 100, 30, 30); 

Mm fi 11(#110548) ; 

Bl cllipse(270, 100, 10, 10); 
Line(265, 250, 350, 149); 


EH console A 


Valentine_Cat 


VALENTINE CAT, CREATED BY RAIN ASHFORD 
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@AYMDES, AYMERIC DESCAMPS, DESIGNER 
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structure 


“CHAOS 


There is a certain beauty in chaos, 
magnificence in the uncontrollable. 
Hafzah Faizal 


The importance of randomness and chaos is 
often underestimated. Our universe would 
not have existed as we know it today without 
chaos. 


Randomness and chaos are critical in making 
generative art look organic. Such exploration 
often leads us to discover the structures and 
patterns that evolve from chaos. 


This post is an appreciation of the role 
pseudo random generators play in creating 
generative art. Sketches in this page are 
created using RANDOM and NOISE functions. 


Author - Mitul S Ayyod 
Github - github.com/msayyod 


MITULS AYYOD (INSTAGRAM - @MITULAYYOD) 
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studio 
sketchpad 


sketchpad 


aribadernatal.com 
@aribadernatal 


sketchpad.cc 
@studiosketchpad 


ARI BADER-NATAL 


in 2010, sketchpad.cc launched as a site for creative coders to collaboratively 
create Processing sketches together. Sketchpad repurposed the Etherpad 
codebase as a real-time collaborative editor for Processing.js (and later for p5.js.) 
Sketchpad emphasized process over product, giving participants the ability to 
rewind and replay the creation of any sketch, and to fork and modify the source 
code from any point in a sketch's history. 


Sketchpad was designed with informal learners in mind, but was also used by 
instructors in over a hundred universities, high schools, and programming 
workshops. The website was provided as a free (and ad-free) service for over ten 
years. Congratulations to the Processing community on this 20th anniversary! 


sketchpad signup login blog about feedback new sketch 


Move canvas 


enna een rere 

Authors 

titled Sketch LG 2 acter 
float a = 0; I I = 


note[] notes: mane 
void setup() { 

size(302, 980); 

colorMode (HSB,255) ; 

frameRate (38) ; 

smooth(): 

notes=new note[3e]; 

for (int 1=0;i<notes.length:i++) ( 

notesiil = new note(): Edit ictost version 
) 


ny ectior 


} 


void draw() ( 5) Modded & times 


2, widthes, heaght+4) ; 
noFall(); Viewer 
stroke(120,8, random(188), rendom(255) ); 
* Full-screen canvas 
for(float 1=0.0;i<TWO_PI;i+=.08) { 
pushNatrix(); 
//strokeWei ght (8.85); 


@) syntaxtightighting 


rotate(i); 
F111(255,, random(255), 88) | Share 
rect(randon(width)+(1*5), random(height), 5, 5); 
erent 2} link to this revision 
Share on Twitter 
*/ EG] Share on Facebook 
discodell(); 


=) embed in HTML 

stroke(230,255, 255,120); // less obtrusive? 

pushMatrix(); 

translate (158,288); Export iosivecson 
malay 


a+PI); @) source code 


poplatrix() HTML (w/canvas) 


strokelfeight (3); 
stroke(150,255, 255) ; 
pushMatrix(): 
translate(10*sin(a4PI*2.2) 0) 
noFill(): 

drawman() ; 

poplatrix(); 


CON 037 352 


JUSTIN BAKSE COMPFORM.NET 


353 


NW Pa a ae 


Processing Ghent was a series of talks and workshops 
on Processing, and its many applications in art, design 
and architecture. 


In the final edition we got Peter Beuls over to talk about 
wee = =iS Experience with creating generative art with early 
computers in the 1970s, and did a workshop on translating 
Barly computer art to the Processing language 


Processing Ghent was organized by Bert Balcaen. Corneel Cannaerts and Jan Uantomme. 
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Have a Nice Day in Basel 


The project is a series of experimental visualizations on 
local weather. While living in Basel, we observed how the 
city’s climate changes unpredictably. 


The book is divided into three chapters: a visual summary of 
the weather during the year 2020 (Ch I - The past), a de- 
tailed hour-by-hour analysis of the changes at various loca- 
tions over a week (Ch II - The Present), and a three weeks 
visualization of forecasts in the city (Ch III - The Fu- 
ture). 


For each chapter we experimented with different language 
codes, using different databases and data scales. Each sec- 
tion stretch through different time ranges (hours, weeks, 
year) and space scales (the whole city or specific locations) 
into consideration, therefore every visualization offers 
different reading experiences, in which the perception of 
the data is dilated or concentrated. The user interaction is 
also various. Going through the pages, the chapters develop 
through an initial condensed overview of data, then a quick 
flipping of hourly data and last a schematic calendar-like 
representation. 


Giorgia Bandiera (@knockthedot)and Maria Alessandra Fratta 
(mafratta.com) 
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To Archivists of the Future 
Hello, World! 


The image on this page 

[the first, for me 

of many marks] 

feels like 

Broad arts building 

burnt coffee elevator 

sunshine balcony fourth floor 
university of california los angeles 


linen rag paper and 

the twenty-first century 

the second decade 

+ trying to learn the new tool 
from the new tool master 


Platforms are most powerful 
using the tool has 

shaped / formed / fashioned 
my own work and thought 


on media, culture, philosophy 
aesthetics & politics 


for the tool shapes the hand! 

and 

the tool has taken up residence 
sticky mortar in the walls of works 
that travel in the vast world 
digital vectors become 

material vectors 

of which I am but one 

or many 


M. James Becker 

b. St. Louis, MO, USA, 1994 
d. ??? 

October 1, 2021 


M. JAMES BECKER @MJAMESBECKER 
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georgesb.com 


Project Notebook 
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P5.JS NOTEBOOK CODING SANDBOX DESIGN + CODE 
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STEM CONTEST 4 
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FRANK BENKELMANN | TWITTER: @BENKELMANN CON 047 BETAHSU CON 048 
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PROXIMITY STUDIES 


A KULTUR DESIGN PROJECT 


‘Spheres: 3 Points: 409 / 453 / 508 
Seeds: 68 / 83 Connections: $20 / 4376 
Position: 0.12083333 


KULTUR 
DESIGN www kulturcesign 


FRED BRIOLET CON 059 MIKE BRONDBJERG 


Water quality diagrams such as the Durov-type below 
illustrate the impact of contaminants on groundwater. 
When drawn in color and animated through 

time, they allow scientists to more 
thoroughly understand physical 
processes. 


Processing makes it all 
possible! 
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NatK Note - Size of plots in plottingfield is proportional to TDS concentration 
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Hong Kong Identity Card 


Patricia Huang 


Date of Birth 
XX-XX-19XX 


Date of Issue 
XX-XX=-20XX 


26-21-18 2649853 
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works by Cacheflowe / Justin Gitlin 5 : 
and many collaborators 
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A 4 by 4 meters force directed diagram, part of “Territorio Archivo” (TA) a 
participatory promoted by Fundacion Cerezales Antonino y Cinia in Cerezales del 
Condado - Leon (Spain), curated by Alfredo Puente and ideated by Chus Dominguez. 


During TA, the inhabitants of six small villages in the region of Condado-Curuefio 
were invited to share their family albums in a common archive and, by doing so, 
they became xdomestic curators* of their pictures. This photographic archive was 
intended, since the beginning, as a starting trigger for an ongoing cycle of 
activities on the community’s memory. 
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Néixer i créixer. Anna Carreras (2020) 


A PROJECT BY CARLSON GARCIA CON 069 384 ANNA CARRERAS @CARRERAS_ANNA CON 070 385 


A 
g 
Q 
3 
8 
is 
é 


\ 


© 1171 KoRONAS.FoTOM. 


ERCOSMOS25 


ul 


ae 3 


"s 


# 
Bi 
e 


i awe 


es 


von tee ees 2 


M7 


387 


CON 072 


GUILLERMO CASADO 


386 


CON 071 


_LAB 


RODRIGO CARVALHO | @VISIOPHONE 


DIEGO CATALDO 
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eqTemp = Lista[i], posTemp = 7 


es Lista[j] < peq 


peq = Lista[j], posTemp = j 


cambio Lista[j] con Lista[posTemp] 
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a =a 


Nearly 10 years ago, | had just started my journey in programming, 
and came across Daniel Shiffman’s The Nature of Code. | quickly 
became addicted to the visual feedback of Processing and began 
my first wobbly steps of building programs (bouncing balls, Snake, 
raindrop simulation, etc.) within the friendly environment of the 
Processing editor. 


Little did-| know that in the next decade, Processing would not only 
be the start of a (probably lifelong) journey into tech and 
interactive art, but would also literally take me across the world. 


Since my first Sketch, Processing has given me an internship, a 
class.to teach, a music video, my first Developer Conference, and 
countless nights of coding, debugging, and exhilaration when 
ideas turn to-reality. 


If you are reading this, thank you for being a part of this 
community! | hope you build with a playful spirit, joy, and with 
plenty of friends! 


‘one Last Time By Shereen Cheers 
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CHAN JUN SHERN (@JUNSHERN ON GITHUB) 


A Platform for Algorithmic 
Composition On p5.js 
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by Chan Jun Shern 
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1 | function draw() { Ky ae 
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l console.log ( | ——_—- Ne 
—— trying new | “ih 
void setup() { libraries with Cc C & @ | 
console.log (“my first p5.js like PoseNet x —" ——=’"_—«“—~ 


and Glitch!”); —— 


sketches in - = 
be a — 


processing”); 


be 


function GSot (p5jsshowcase) { 
in the summer of 2021, i had 
the chance to continue the 
development of the p5.js showcase, 
specifically curating it by theme. 
it was one of the most special and 
rewarding experiences and i was 
enamored by the p5.js community and 
their passion for pushing the 
perceptions of how p5.js can be used. 
shoutout to my mentors ashley kang, 
kt duffy, and sam vassor <3 


katie chan, 202] 
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MANIFEST 


was a project by Michael Chang while studying at UCLA 
Design | Media Arts with Casey Reas' “Programming Media II”. 

It was a biologically inspired generative art piece which let you ° 
draw lines that transformed into swimming organism, living in 
a fluid-like environment. 


Manifest was one of the first Processing sketches to utilize 
vector art, utilizing a custom SVG Parser. This parser became 
an early implementation of Processing’s SVG Support. 
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Project #3 experimental 
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— | Hooray fecray \ooray Hooray Hooray Hooray \tooray Hooray (ey yooray Hooray Hooray 
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In this interactive application, the user can selectively spawn autonomous agents on the canvas using the mouse. 
There is a small collection of different sets of rules to choose from and change the behavior of the agents that Sncerely Yous 
trace and recreate an underlying photo in various styles. Ge] 
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HARMONY CLOCK 


This clock is gives three options 

for time viewing; past, present, and 
future. It uses the hover function to 
display the time at present, -1s for 
the time past, and +1s for the time 
future. For past and future the time 
is displayed atop the present time. 
Without hovering the present time is 
displayed. This clock is a reminder 
to “live in the present” as that is the 
only way harmony is acheived. 


let h = hour(); 
let m = minute(); 
let s = second(); 


texi(h+"."+m+":"+45, 183,333) 


light fi hr 
//present You are now 86 lightyears from home 


if (mouseX > 50 && mouseY > 145 Tilt your hand sideways like you're turning a plane, to travel home 
&& mouseX < 360 && mouseY < 200) { 
fill(255,255,0); 


Cc Fr 

textSize(75); 

text("PRESENT’, width/2, height/2); 
E=3 . D7 


fy = text(h+"s"*+m+":"+s, 183,333); 
17 _ 31: ® y a & 


} 
//past 


else if (mouseX > 50 && mouseY > 75 
&& mouseX <220 && mouseY <132) { 


p A oT fill(255,255,0); 
textSize(75); 
text('PAST!, 400/3,400/3); 
P R E S E N T text(h+":"+m+":"+(s-1), 183, 333); 
} 
FUTL 


//toture 
else if (mouseX > 50 && mouseY > 210 
&& mouseX <310 && mouseY < 264) { 
fill(255,255,0); 
textSize(75); 
text('FUTURE',400/2.25,400/1.5); 
text(h+":"+m+":"+(s+1), 183, 333); 


JRE 
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we ered tt tn. one of the 
springs, we believe. (sorry, pra 
remembering thits wrong. 


we were living inside 
the old tower back then. 


) we loved seeing our fac 
reflected on the surface, 
whe ere count! less, new 


IDEAS p and then erased.. 
Ersie fungers at the cower. 


some were just Tuma one me dau 9 wandering in 
an heirloom dei Wah, we fou o a 
canvas see street tree. 


leaving the old tower, we 
talked about how ttle ee already know how many 
Temains. but habits will stick times you can. Zoom, in on. the 
may of conquerable peaks). 


since we can't forget the 
Ronee ofthe canvas now, 
12 decided to {lL in the 
lank “with a recursive 
sense of wonder. 


a rnerofcian 
pressing © Ald 
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Programming and Computer Art from Scratch 
with Processing 


Leaming materials for programming and comp 


Department of Integrat 


https://cocopon.me/zero-pde/ 


tte ub.com/ 
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\/www.pcdaarhus.net > why code? (open your web browser console) 

let celebrate PCD = [ 

“Ester Marie Aagard (2619)\ 
-I want to understand the hidden parts as data-tracking, the way in which different software's are programmed and 
so forth. [...]I use coding both to understand and explain the software that we use", 

“Andreja Andric (2019)\ 
+I subscribe to the Pythagorean idea that numbers are behind everything. with this in mind, coding helps me 
connect to the hidden side of the world and is a form of contemplative action", 

“Anna Brynskov (2626)\ 
-With knowledge about coding you can change the world. Or at Least you can have a stronger voice in discussions 
about how society should be built and designed. Knowledge is power", 

“Tilde Lageri Damborg (2019)\ 
-Coding to me is not only a tool to reach a end goal, its an inspiring, strict, rigid and sometimes very annoying 
co-designer", 

“Raune Frankjer (2021) \ 
-To me it's almost Like some a kind of modern day shamanism - using sensing technology [...] to reveal the 
forgotten yet amazingly vibrant and intertwined multispecies world that we Live in and are part of", 

“ROLf Holm (2828)\ 
-Personally for me, coding is fun. Someone once called it, ‘the greatest puzzle', and I get why. It’s the most 
open-ended game there is, with no end goal beyond creativity and mastery.", 

“Niels Konrad (202@)\ 
-When I started studying deisgn, I remember I saw coding and prototyping with code as a little spark, a little bit 
of magic that could breathe life into already appealing visual design.", 

"simon Feusi Ludvigsen(2621)\ 
«Knowledge about coding gives you the tools to change the world in your own way. It gives you the ability to solve 
problems from a new perspective that the majority of people don’t have knowledge about.", 

“Alex Merch (2626)\ 
-Besides being a great compositorial tool for autonomous and interactive music, coding also bridges digital and 
physical space", 

"Gabriel Pereira (2026)\ 
+I think I’m interested in coding because I’m ultimately afraid of it. [...]I (as anyone), am accountable to it, 
and to building it into something that supports and advances human rights, and social/economic justice", 

"Magda Ty2lik-Carver (2620)\ 
-code / language, code / translation, computation before code, worlding practices“, 

“Kristoffer Srum (2621)\ 
-Why would I not code? [...] I mostly use code to break or hack technological artifacts such as routers or 
screens, in order to make them do things they were not originally intended to do.", 

"Mark Staun Poulsen (2619)\ 
-code underwrites so many aspects of contemporary digital Living[...]I have a unique chance to explore meaning and 
consequences of computation in light of a creative and practical engagement with programming", 

“Mace Ojala (2021)\ 
-Basically, to code is to seek a lasting relationship which is based not only on one-sided use, but on mutual 
transformation. [...]that is a beautiful, worthwhile and even rebellious thing to do.", 

"Sofie Firsterling Menster (2621)\ 
-what I find most intriguing about coding is how I have the possibility to increase awareness and critical 
reflection about topics that I find important to draw attention to, especially as a lack of critical reflection 
helps to perpetuate this inequality..", 

“Lasse Korsgaard (2020)\ 
~The main reason I code and love coding is that I have the ability to create my own tools to use in my creative 
process", 

"ann Karring (2619)\ 
-To me coding is a way to express myself. Whether it is personal or global issues, coding helps me reflect on 
these issues. I also use it as a tool of communication, so I can share my views with others", 

"Malthe Stavning Erslev (2019)\ 
-I am interested in coding because it inspires me and enables me to think trough conceptual ideas, notions, 
concerns etc. I will often start out with a vague idea of a concept that I want to explore, and the practice of 
coding will ‘take’ me somewhere I did not anticipate.", 

“Nanna Debois Buhl (2021)\ 
-What happens when the weaving-computing relationship is examined from a bodily and material perspective and when 
we engage the loom as a computer, as a time machine?[...]I explore the connections between the threads of the Loom 
and the programming of the computer", 

“Nina Isis Kinch Bolton (2621)\ 
-I believe it is important to understand one of the most prevalent creation tools of today so that we can question 
and create for all and not just the privileged few", 

"Sofie Andersen (2021)\ 
-Coding for me, is a way of expressing yourself just like art and literature. Just like traditional artforms have 
been used to raise critique and awareness of important matters, I see coding as the new artform that gives 
empowerment back to the individual." 

ii 


function draw() { 
frameRate(1) ; 
print (random(celebrate_PCD)); 
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Creative coding class at Hof University / Campus Muenc 


Portrait remixes 2021 — p5js / OpenProcessing — Pro’ 
https://openprocessing.org/class/68512 


. Michael Zoellner 


hberg / Communication Design 


What are shaders? 


Setting up shaders in p5,js 
How to write a shade 


mportant shader conce 


Using Variable Qualifie 


Using Texture Coordin: 


Basic Examples 


jent shader 


Gradient shader using texcoord 


Uniforms (Inter 


tivity, 
Applying Shaders as Texture 


tov 


Experimental Examples 


pix Feedback 


Working with other resources 


ting Shadertoy Examples 


Book of Sh with 


Learn more 


Check out these resources 


CASEY CONCHINHA, LOUISE LESSEL CON 097 412 


Home GitHub Glitch Collection 


Welcome to p5.js shaders 


Shaders are a great way to make graphics for your projects. So far you have probably made graphic 
shapes like rect() or ellipse) or maybe even 3D shapes like a plane() or a box(), and you should be more 
than familiar with using fill() to decide the color of these objects. But wouldn't it be great if we could 


make these objects have moving graphics on them? And without slowing down our sketch? 


Enter the shader! 


shader-as-texture by @ Share | View Source 


In this guide you will learn what a shader is, how to use it efficiently in p5, and how to make your own! 


Consider this “the booklet of shaders". A great way to start familiarizing yourself with making amazing 
graphics for your projects in p5 and a simple introduction to shaders. Then, if you find yourself 
entranced by the world of shaders (like we do) please see the section on moving further with shaders, 


where we have collected some of the best sources online for finding shaders and learning more. 


One of these, "The Book of Shaders” by Patricio Gonzalez Vivo and Jen Lowe, is a truly great resource if 
you want to dive deeper into the technical details of shaders, and we will be borrowing some 


explanations from this online book. 


Thank you 


This guide is an open-source project made during xStory at a ainha and Louise 


Lessél. 


We want to thank the following people for help and guidance during the project: 


Adam Ferriss, for laying the groundwork for the entire project with his own 


Or Fleisher, Kyle Phillips, and Sehyun Kim for being our mentors. 


Stalgia Grigg and Kate Hollenbach for answering our p5.js shader implementation questions. 


Patricio Gonzalez Vivo and Jen Lowe for writing the amazing Book of Shaders 


if =a 
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HTTPS://COSMICBHEJAFRY.GITHUB.IO/ 
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KAUE COSTA // WWW.KAOX.TY. 


HANKS PROCESSING 20 YEARS MADE WITH LOVE! 


KAUE COSTA// KAOX.TV CON 103 418 CREATIVE CODE STAMMTISCH CON 104 419 


2 Creative Coding AMS. 
“s 


Mark your agendas! CCA 0010 will be Thursday 
February 5th 2015! meetup. Creative-C 


@ Creative Coding AMS 


Ultimate CC communities selfie: Berlin, Tehran, 
Nairobi, Utrecht, Linz, Shiraz, Buones Aires, Tilburg, 
Amsterdam, Cairo & Stockholm! #NODE17 


ae) Creative Coding AMS 
a 


Here we are, Processing Community Day Amsterdam 
#PCD2019 -a full day of crazy amazing creative people 
gathering in one place 


CREATIVE CODING AMSTERDAM 


Retune 
The community #meetup is happening right now on 


our double decker bus! \ am on wheels # 


Creative Code Berlin 
Ambassadors of CodeBLN, @CC 3 : itr, and 
LDNCr Code were for the first time in the same room at # 


. Creative Coding AMS 
a 


We also have @LisaEvelynR teaching some 
programming basics to introduce people to 


a ’& Sabrina Verhage 
Y Hello World! -today @cc utr hosted an entirely female creative coding 
panel 


CON 105 


Creative 
Coding 
Madrid_ 


CREATIVE CODING MADRID 


Hola! Somos Creative Coding Madrid y estamos muy contentas de haber Ilegado 
hasta aqui formando una comunidad alrededor de la programacion creativa que 
hemos visto crecer. Comenzamos en 2012 bajo el nombre de ProcessingMadrid con 
la intencidn de imitar iniciativas similares que surgieron en ciudades de todo el 
mundo como Paris, Berlin, Vancouver, El Cairo, etc, 


Desde entonces han pasado artistas y programadoras/es de diferentes campos 
como el videomapping, instalacidn, arquitectura, audiovisual, robstica o el disefio. 
Los encuentros que hemos organizado han ido desde talleres y charlas, hasta jams y 
convocatorias online. 


No tenemos ninguna organizacion detras que nos patrocine, si bien recibimos 
apoyo por instituciones de la ciudad, que nos ceden su espacio y recursos para 
nuestras actividades como Medialab Prado, Matadero Madrid o MakeSpaceMadrid. 


Agradecemos a todas las personas que hacen posible Processing, por todos estos 


afios de creatividad sin limites y que sigamos pudiendo disfrutar por muchos afios 
mas! Gracias! 
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WHAT DOES BEING PART OF THE CCU 
COMMUNITY MEAN TO YOU AND YOUR 
CREATIVE CODING PRACTICE? 


DEFRAME f ‘ SN HAY KRANEN 
(CAROLIEN TEUNISSE) \ Uy ; : Showing the world that code, 
To meet like-minded people in real-life algorithms and digital media 
is not only fun, but it also enriches my can be art as well. 
network of wonderful and interesting 
people to collaborate with. It's inspiring 
~ to see what other coders make and 
| learn of how they work. 


WHAT DOES BEING PART OF THE CCU 
COMMUNITY MEAN TO YOU AND YOUR 
[VE CODING PRACTICE? 


Data-driven projection mapping 
installation called Stroomtijd, Highlight — 
at Central station Delft 


HAREWOODS ; fiat ES 

(MATTHIJS HASEBOS) WR Stright A Stdert @ is 

To my creative coding practice, being : a 
part of the CCU community means 
being inspired. 


m Me wnt Fane 8 
The Kinetic Web (2012) is a bookmarklet that turns 
every website into a mobile sculpture. 


LUTS FERRETRA 
Sharing a passion and 
inspiring each other. 


JAKUB VALTAR 

CCU is a place to meet fellow creative 
coders in the Netherlands — they GX | —, 

always have some interesting event KATPATAT 


coming up! (NEANDER) 


| CCU brings a network of Painting with light. Light Canvas, Luis 


A piece formed from curves placed Parcie 


by intersecting circles. 


awesome people and 


disciplines to the table to 
Pendulum (2019), based on #3 by Joost collab with and get inspired 


Rekveld at Art Machines 0.2 workshop : 1 - — by. 


AUDIOPHOBE TaN / FHREADY 


(FREDDY OFFENGA) 

Get inspired by others 

and interchange creative 

ideas. Meeting people 

with the same passion 
for creative coding. | 


fear. ; DSYNC, a sizecoding example in 


(SIETSE VAN DER MEER) 

The CCU community is the bottomless source | turn to for 
my unquenchable thirst for inspiration, is a trigger to my 
creativity processes, my main method of extracurricular 
personal education and above all a warm blanket of social 
interaction and meeting new friends. 


An image of the voidscape 
‘Zee’ it's about chaos and 
A personal doodle; outtake of a | 


Processing sketch’ generating 32 bytes 


Cc — al cascades of particle interactions... = C | | 
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CCU - KRANEN, FERREIRA, KATPATAT, F#READY CON 108 


WHAT DOES BEING PART OF THE CCU 


COMMUNITY MEAN TO YOU AND YOUR 
CREATIVE CODING PRACTICE? 


NARCODE 
(FELIPE IGNACIO NORIEGA) 

It means actively learning, applying and contributing to 
common knowledge and efforts in the digital art 
sector. 


The codeklavier is a system which 
interprets the piano input as basic lambda 
calculus functions. 


Meeting like minded people, | 
get inspired by each other and |ly 
support each other. 


First time live coding with Timo 
Hoogland at one of the CCU events 


JO KROESE 

| spent my teenage years using Processing mostly by 
myself. It is beautiful and motivating to be around 
other people who are pursuing creative coding and 
pushing their practice. 


‘Modular Dancing’ is a system for creating 
rule-based modular choreography. 


JONATHAN REUS 
A hub for the community 
of live performers and 
digital artists to meet and 
feel a sense of shared 
space. 


Anatomies of Intelligence by Jonathan Reus & 
Joana Chicau, performance at V2 in 2018 
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was a sophomore, Like a vast majori 


what I thought coding would be like." 


adult experience" 
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CREATIVECODINGCIRCLE ARTIS 


Data-Masks : Generator-Discriminator Prototype 


Medium: Processing 
Dimensions: 300x400px 
Date: March 2013, reformatted in April 2021. 


MB Department of 


Se Education 


This was the first prototype that eventually inspired me 
to create my 'Data-Masks' Masters of Science thesis, 
which uses facial recognition and detection algorithms as 
its discriminator, rather than a simple linear 
correlation. 


http: //www.sterlingcrispin.com/data-masks.html 


code available here: 


http: //www.sterlingcrispin.com/datamasks/script.js 


Who is in these photos? 


To tag your friends, review the suggested names and click Save Tags at the bottom of this page. Ifa 
name is missing or incorrect, list anew name and press Enter. 
Remember: If someone doesn't like a photo, they can untag themselves or ask you to take it down. 


Developed by the NYC DOE computer science 
education team, Creative Web is a 54-hour middle 
school curnculum that teaches students to build 
computer applications and media that run in a browser. 
Students will be introduced to HTML and CSS and then 
learn how to make their own expressive and 
interactive web pages using the open source 
JavaScnpt library p5. js. They will gain a deeper 
understanding of the relationship between these 
markup and programming languages, and learn how 
they can contnbute to the larger CS community that 
exists outside their classrooms. 


Who is this? Who is this? Who is this? 


Skip Tagging Friends | 
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This course has been implemented in NYC schools, 
revised by classroom teachers with guidance from the 
Processing foundation, and aligns with the CS4AlLL 
Blueprint for CS education that emphasizes a hands-on 
approach called creative computing. You can view the 
full curnculum at the link below: 


www.blueprint.cs4all.nyc 
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INTRODUCTION 10 
COMPUTATIONAL MEDIA 


A HIGH SCHOOL CURRICULUM a. a ay = 


Developed by the NYC DOE computer science (CS) education team, ‘ —| 
the Introduction to Computational Media is a yearlong (108 hours) 
creative computing course for high schools using the open-source 3 a 
Javascript library p5.js. By understanding how code can be a medium 
for creative expression, students will learn the fundamentals of 
computer science while designing and prototyping interactive projects 
that run on a browser. 


85+ This course has been implemented in NYC 
schools via CS4AIl’s Software Engineering 


TEACH ERS Program (SEP), revised by classroom 
teachers with guidance from the Processing 
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for helping me find my creative medium 
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Van Gogh Jitterbug 
= Random art generation 
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Chandler Zausner 2020 
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Journey so far : Processing Fellowship 2019 


8 waneswnioas GED 


It’sbeen really long since we posted an update of all that has been taking place since 
March due to some avoidable and unavoidable circumstances. But it’s better late than 


never 


1, along with co-fellows Nancy Chauhan and Shalaryay, had the following goals in 
mind at the beginning of the fellowship: 


1. Translation of the p5,js website to Hindi 
2, Hindi translation of the pS js YouTube tutorial series 


3, Creating awareness among NGOs and schools about Processing tools in the Indian 
community 


As far as these goals are concerned, we have come a really long way! But this journey 
wasn't smooth, we faced a lot of ups and downs during the course of this fellowship. 


Despite our busy schedule owing to our graduate studentship, Nancy Chauhan and I 


decided to have a head-start by getting started with the P5js website translation. No 


wonder, it took us some time to figure our way out. But, thanks to the extremely warm 


Processing Foundation for extendinga helping hand to help us overcome all the 


challenges that we faced. 


lauren mecarthy helped us with the baby steps, Both of us started dividing the work 


between ourselves and embarked on our very first step towards our mission, We 
changed the YML files corresponding to individual web pages and committed our 
changes. In order to make our work cleaner, I squashed the commits and created a pull 


Tequest. Unfortunately, when [tried to run the project, it crashed. 


bitpsi/medlium. com prec ecting foundation felowshipyjoumey-c0-farprocesting-ellowship-2010-5774c9133409 ws 
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Shaharyar Shamshi conelucteda workshop on Intrecuctionto creative codin 


Following this, Nancy reached out to to several schools in Himachal Pradesh and 
conducted a 5-hour workshop in a girls senior secondary school, which invited girls 
from several schools. She had a very lovely experience teaching inquisitive young 
minds, answering their queries and providing food for their thought. Here are a few 
snaps of this workshop: 


Nancy Chauhan reached out to iris trom various schools an 


Conducting a series of such workshops gave us a lot of confidence and direction 
regarding the tremendous potential these young minds possessed. Now, 


turn. I conducted a 5-hour workshop for the fresher students of CET, Bhubaneswar 
who were yet to find their way in programming and highlighted how p5,js could help 


them start and grow asa developer. These are a few snaps of the workshop: 


ntos//medium.comiorecessina foundation felowshevfoumev soar wracessna-tlowshio-2019-5774c915409 35 
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This was the first blow that we faced. But later, we realized this wasn’t the floor of the 
valley. We tried to figure out the solution to this issue but all of our efforts went in vain. 
We also had other goals to focus on and this was the first step and now, the first failure 

as well, Shaharyar came to our rescue and was quick to figure out that the pitfall lied 

with escape sequences, It hadn't dawned upon us yet’. Our translation didn't work 


due to the improper placement of escape sequences. 


Atthis point, he embarked ona new joumey, taking grammar into account, this time. It 
needs a lot of courage to start afresh! All thanks to him, he worked in that direction and 


instilled new confidence in us. Cheers to his indomitable will Gs! 


Now, a bulk of the mission was still untouched. We had to reach out to NGOs and 
schools and we knew that it would require a lot of effort and time to convince them. 
Nancy had once tried to get started with the teaching stuffand she had to face a lot of 
questions regarding why students should even be interested fora workshop that 


involved programming, Our mentor Mathura M Govindaraian was quick to extend a 
helping hand by connecting us with Aditi Kumar of Feminist Approach to Technology, 


who was well versed with the nitty gritty of conducting educational workshops for 
underprivileged kids. 


We scheduled a meeting with Aditi and she asked us to craft a proposal with all the 
stuff that we were going to teach, fairly detailed and gave usa lot of tips for tackling 
questions that we were likely to face. This isa link to the proposal: 
https://docs,google.com/document/d/1¥4pN80KSBurujNOnNPPdhODu_tCTQ2JMK 
H0s4OMARLK/edit?usp=drivesdk. This helped usa lot in refining and organizing our 


thought regarding what we wanted to teach. 


First, we wanted to start with the audience who were a bit familiar with programming 
but not with p5.js and have a first-hand idea of the type of response we are likely to 
receive, Shaharyar conducted a 5-hour workshop in NIT, Hamirpur introducing 
interactive coding and importance of p5.js. These are a few snaps of the workshop: 
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Most of the above workshops rooms took place in April. By now, Shaharyar has 


completed the web translations and it will soon be available in the website. 'm 


including a link to his contributions 


As far as the YouTube tutorials translation is concerned, Nancy scheduled a meeting 
with Daniel Shiffman who helped us in getting started with the translation part. Till 
now we have translated a total of 4 videos and all other videos are to be translated by 


Naney and me. 


Summing up, a total of 30-40 hours was devoted for web translation collectively, a 
total of 25 hours for reaching out to various schools, colleges and conducting 
workshops and a total of 35 hours for YouTube tutorials translation. 


We would like to extend our heartfelt gratitude to our mentor Mathura M 
Govindarajan for her invaluable guidance and support all throughout these 2 months. 
She made sure that we were on the right track and walked the extra mile to make 


that we received timely help every time we needed. Last but not the least, we would 
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Package name 
Android SDK Platform 30 
Android SDK Build-Tools 
Android SDK Build-Tools 
Sources for Android 30 
Android SDK Platform 31 
Android SDK Build-Tools 
Android SDK Platform 28 
Android SDK Tools 
Android Emulator 
Android SDK Build-Tools 


Initial commit for SDK Updater 


PF master (#359) 
D latest. android-264 


US rupak0577 committed on 23 Jul 2017 


Showing 3 changed files with 354 additions and 8 deletions. 


SDK Updater 


Installed version 
E 
30.0.2 
29.0.2 
1 

il 
30.0.3 
6 
26.1.1 
30.7.5 
31.0.0 


Available update 


1 update found! 


1 parent 1b9f9ba 


src/processing/mode/android/AndroidEditor.java (C) 


4 mmmm src/processing/mode/android/AndroidSDK.jave () 


v 351 BENE src/processing/mode/android/SDKUpdater. java [Cl 


@ -0,0 +1,351 @@ 


+ package process ing.mode.android; 
import processing. app. Platforn; 


import javax. swing.*; 
import javax. swing. border. EmptyBorde 
import javax. swing. table. DefaultTableModel; 
import java.awt.x; 

import java.awt.event.ActionEvent; 

import java.awt.event, ActionListener; 
inport java.beans.PropertyChangeevent; 
import java.beans.PropertyChangelistener; 
import java.io. BufferedReader; 

import java.io.File; 

import java.io. IOException; 

Anport java. 1o,InputStreanReader; 

inport java.util. AarrayLis 

import java.util. Arrays; 

import java.util. HashMap; 

import java.util. Vector; 


public class SDKUpdater extends JFrame implements PropertyChangeListener { 


private HashMap<String, Boolean> requiredPackages; 


private final Vector<String> columnsInstalled = new Vector<>(Arrays.asList("Path", "Version", 
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GENERATIVE ART: « TIPS & TRICKS » 
Romain ASTOURIC / @DataFlaw 


- Generative art series produced with Proces 


White gel ink pen, deep black 


g, drawn by an Axidraw A3 / V3 digital plotter - 
paper, high density (300g / m2). 


Thrilled by the renaissance of digital plotters, | designed and produced this series of fully coded artworks 
on Processing. Inspired by classic geometric patterns and various creative algorithms with simple rules but 
fascinating results, | wanted to show the hidden beauty of complex formulas and abstract calculations. 


day dataflaw.art - liinks.co/dataflaw 


SY 
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JEFF DAVIS 


Function setup() { 
createCanvas(windowWidth, windowHeight) 


function draw() { | | 
background(a, 200) | 
randomSeed(50) //lock random to # seed(gear) 


let Loopcount = 89 
For(let i = @; 1 < loopCount; i++) { 


let x = map(i, 0, ew 0, width) //d; Tooplanlehelwadth 2013 


mo LL OL | 


// if() to make last le bla 


nostroke( ill \@ ' 


ellipse(random(width), random(frameCount%width),_1, 


if(d == loopCount-1) { 
#411(8) 
} 


stroke(8) 
strokeWeight(random(i, 50) 


circle(x, height / 2, noise(i * 8@ + frameCount = .01) = 408) 


Trunction setup() 


function draw() { 
let mapbg = map(mouseX, 0, height 
background(mapbg, 8,0) 


let mysize = 690 
noFall() —/ 
stroke(255) 
strokeWeight (1) 


/push() | 

//translate(width/2, height/2 
/fellipse(@, 6, mysize) 
//pop() \ \ 


for(let 1-0; icze; i++){ 
jellipse(width/2, height/2, mouseX 
ellipse(width/2, height/2, fremeCount’mysize*1, height) 
jellipse(FrameCount%width, height/2, framoCount+i/15%mysize, 
ipse(FrameCount+i/Zewidth, height/2, frameCountsimysize, nysize) 


mysize) 


portfolio 1-1 


PREV / NEXT 


SHOW THUMBNAILS 
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function prelosd() { 
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font = loadFone FontPath): 


0 layore-34 


Funetion setup() { i 
‘oreateCenvas(windowwidth, ws 


indowheight._ WERK 
backgraund(a) : 


bulistoxtbs)! 
butidtex(ps) 
tectFont(font); 
textSize(4e); 
‘extALign(CENTER, BOTTOM) 
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How Proc 
essing ch 
anged eve 
rything - 

I started t 


eaching soft 


ware to desig 


n students in 


2000. I had jus 


t moved to Sweden 


to work as a unive 


rsity teacher after a 


fairly short period in t 


he industry. Back then, Java w 


as the most used language in academi 


a, but there was little done in the field of le 
arning programming for people with no initial interest in engineeri 
ng or natural sciences. The tools I got access to were clunky, and so was the exp 
erience students had. Coming from an engineering background myself, it didn't occ 
ur to me in the first place how much the context of use meant for having a good L 
earning process. The first year I made the same mistakes my teachers made with us 
some years prior: Taught theory before doing any practical experiments, not show 
ing the value of using software in a creative way until having been exposed to th 
e theoretical background behind the tools. I had nothing to rely on, there were n 
© other experiences I could find, and very few of my colleagues had any experienc 
e in using technology as a material and not just as a tool. Building a curriculum 
was a matter of trial and error encompassing shifting between tools, books, and 
different versions of Java. And then, a former student taking his masters abroad 
spoke to me about Processing in late 2004. I had no idea where it came from, I ju 
st knew that students could download it on their computers and run it in a matter 
of minutes. The examples covered relevant -yet engaging- topics. Code looked cle 
an and the API was very straightforward. I was game in a matter of minutes. We co 
uld use all of the knowledge we had created over the course of years and integrat 
e it in a much easier to use IDE. Soon enough, I got involved in the creation of 
Arduino, a project that got influences -among others- from Processing. We used ou 
r own editor to write, compile, and upload code, but there was a disconnect betwe 
en tools. If people learned how to program on Processing (by then it was already 
a de-facto standard at many design and art schools), why should they confront a d 
ifferent set of metaphors to program microcontroller boards? By the time Processi 
ng's codebase became free software, and just like others did before, we made Proc 
essing's UI the point of departure of our own UI. And that is how Processing chan 
ged everything ... or at least, everything that I do. 


DCUARTIELLES 


How Processing changed everything - I started teaching software to design student 
s in 2006. I had just moved to Sweden to work as a university teacher after a fai 
rly short period in the industry. Back then, Java was the most used language in < 
cademia, but there was Little done in the field of Learning programming for peop! 
e with no initial interest in engineering or natural sciences. The tools I got ac 
cess to were clunky, and so was the experience students had. Coming from an engir 
eering background myself, it didn't occur to me in the first place how much the « 
context of use meant for having a good learning process. The first year I made the 
sane mistakes my teachers made with us some years prior: Taught theory before do 
ing any practical experiments, not showing the value of using software in a creat 
ive way until having been exposed to the theoretical background behind the tools, 
I had nothing to rely on, there were no other experiences I could find, and very 
few of my colleagues had any experience in using technology as a material and no 
+ just as a tool, Building a curriculun was a matter of trial and error encompass 
ing shifting between tools, books, and different versions of Java. And then, a f¢ 
mer student taking his masters abroad spoke to me about Processing in late 2004, 
I had no idea where it cane from, I just knew that students could download it on 
their computers and run it in a matter of minutes. The examples covered relevant 
-yet engaging- topics. Code looked clean and the API was very straightforward. I 
was game in a matter of minutes. We could use all of the knowledge we had create 
d over the course of years and integrate it in a much easier to use IDE. Soon enc 
ugh, I got involved in the creation of Arduino, a project that got influences -at 
ong others- from Processing. We used our own editor to write, compile, and uploac 
code, but there was a disconnect between tools. If people learned how to program 


on Processing (by then it was already a de-facto standard 
at many design and art schools), why should 


they confront a different set of met 
aphors to program microcontroll 


er boards? By the time Proc 
essing's codebase becam 


e free software, and 
just like others di 
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the point of d 
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changed ever 
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r at least, 
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hat I do. 
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Creativity ts not creative. 
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Developer 
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All beginnings are hard! 
In a programming language there are many confusing elements for 


beginners: variables, conditions, functions, parameters and more. 


In order to illustrate the subject of software development to the students in 
the vocational training as application developer and thus make it 
understandable, Processing has proven itself with the creation of simple 


shapes and their manipulation in terms of size, position and color. 


The key to understanding programming lies in learning how to formulate 
program instructions using the right syntax and how to structure program 


sequences, i.e. how to design algorithms. 


Open tasks favor individual learning and processing paths, promote 
subject-specific and interdisciplinary competencies and enable discovery 


and self-directed work and learning. 


Processing provides a brain-friendly introduction to the topic. Because it 
builds on prior knowledge fram geametry and mathematics as well as 


produces a pictorial result, both sides of the brain are activated. 


20 years of Processing! 


One of my success factors as a teacher and coach, since 2001. 
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Happy 20th birthday, Processing! 


Above are some examples of the open source p5.js exercises I’ve developed 
to help teach creative coding over the years. Thank you for building such 
a wonderful software, organization, and a fun & welcoming environment! 


— Matt DesLauriers (mattdes1l) 
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Happy 20th birthday Processing! 
Discovering the magic of generative art was what sparked my 
passion for moving from architecture to software engineering. 
Forever thank you! 


Andrea Diotallevi 
Instagram: @andreadiotalleviart 
Twitter: @a_diotallevi_ 
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Processsing has been so important in my life it does not fit in a page 

It has taken my soul expresion to all around the world, on the top of stages, from the house of thousands of 
strangers to the streets of far away cities. It pushed me to create workshops, to know people 

and even to meet my deeper self. Thank you. 


Victor Doval 
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// love will tear us apart. 
if eld e20 2. 


// the fast fourier transform (FFT) 

// jean-baptiste joseph fourier 

// fourier theorem: 

// a periodic signal may be expressed 
// as the sum of a series of sine waves, 
// each of which has a specific 

// amplitude and phase. 


// happy birthday, processing. 
// https: //openprocessing.org/sketch/1291541 


var themic; // this is the audio input 
var thefft; // this is an FFT object 
var x = 0; 

var ystep = 0; 


function setup() { 
createCanvas(windowWidth, windowHeight); 
background (255); 


themic = new p5.AudioIn(); // connect to the microphone 
themic.start(); // turn on the microphone 
thefft = new p5.FFT(); // create an FFT object 


thefft.setInput(themic); // listen to the microphone 


} 


function draw() { 
stroke(0, 100); 


let thespectrum = thefft.analyze(); // load analysis data 
for(let i = 0;i<thespectrum. length; i++) 
{ 


let x = sqrt(i/thespectrum.length) * width; // exponential frequency spacing 
let y = height - thespectrum[i]*1; // offset based on FFT channel amplitude 
point(x, y - ystep); // draw 

ay 

ystept+; // shift waterfall scan line 

if(ystep>height) // top of screen 

i 
background(255); // clear 
ystep = 0; // reset scan line 
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E.C.H 


"Daily Coding" 


https://www. instagram.com/eikun_0903/ 


E.C.H / WUWAWUWS 
a Artist, Creative Coder 
https://eiichiishii-web.jimdofree.com/ 


"Pastel"(Video Installation) 


I started using Processing when I was in high school. 

At the time, I was a member of the computer club, and when I was bored 
with general programming languages, I learned that there was a language 
suitable for creating graphics and digital art. That language was 
Processing. 


I was immediately hooked on Processing because of its 
easy-to-understand grammar and ease of expression, even for beginners. 
Today, I am an artist, and I still use Processing and p5.js as my main 
tools for creation. 


In recent years, the community has become more active, and this year, 


I learned that it has been 20 years since Processing was developed, and 
I am looking forward to its future development. 
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KELLY EGAN HTTPS://KELLYEGAN.NET CON 151 MIGUEL ELIZALDE / @URBANINFRASOUND CON 152 


Ursula Endlicher 
Power Line Feeds 


Interactive dinner table for two guests 


Power Line Feeds, i Gallery, 19. sed at Laboratory, I 
Power Line Feeds is a networked in tive multi e-media installation a 


er y ath urse meal 
dinner i 
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em of power 
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MARK ERICSON, @M_CERICSON 


salia (music score) 


Overall, this was a great 
introduction to p5.js. and the 
community has been a great 
resource when it comes me 
trying to learn my first primary 


A Self-Portrait Through the Eyes 


of My Fiance 


By Ethan Omo 


For my first project in PS.js as 
part of the Emergent Digital 
Tools class at the University 
of Denver, | wanted to create 
something meaningful. “A 
Self-Portrait Through the 
Eyes of My Fiance” (2021) 
was born from a conversation 
with one of my close about 
her ADHD. She spoke about 
how difficult it was to find a 
partner that really understand 
how this manifestation of 
neurodivergence works. 


This made me reflect on my 
interactions with my partner as 
she has ADHD. 


wanted to create a piece 

that reminds of what she 
experiences. My partner has 
told me she fixates on certain 
details like wild eyebrow hairs or 
eyes when she talks to people 
and loses track of their saying. 
This piece is meant to remind 
me that | need to consider her 
experience when | tell her things, 
or when she is having trouble 
with a task. It is a reminder for to 
always try to understand better 
and grow into a better partner. 


The coding behind the piece 
is relatively simple. It based 
around the idea of just using 2d 


coding language. Thank you 
ps5.js community! 


Link: to the editble file in p5.js: 
https://editor. p5js. 
org/eomo9106/ 
sketches/SFmYPQBk8& 


And for fun here is the code for 
the eyes: 


fil(255, 255, 255): 
circle(330, 180, 100); 
circle(530, 200, 100); 
fill(74, 71, 18); 
circle(530, 200, 30); 
circle(330, 180, 50); 


stroke(O); 
strokeWeight(5); 
line(350, 80, 320, 13 
line(360, 90, 320, 130,); 
line(370, 100, 320, 130,); 
line(560, 90, 520, 150,); 
line(570, 100, 520, 150,); 
line(580, 100, 520, 150,); 


random network 


primitives to construct a portrait. 
As a result of my reflections! The colors and the abstract style 
are intentional. 


melancholia 

Parsing a network from source to target, is all about finding our way—from problem to solution, from person to person, 
from here to home. We find our way through a small world, a network of incestuous links and a little randomness. It's 
pathfinding through myriad maps. And as behavior follows structure, it's not surprising that the intricacies of our lives 
mirror the filagreed arbors of our neural forests. 
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lam very grateful to be part of a community 
that is inclusive, creative, open, accessible 
and caring. The stability and longevity of that 
outlives any one digital file. Thank you to the 


Processing leaders and community members, 


today and always. 
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FAL Works 
BEHNAZ FARAHI 


CON 161 476 


FAL WORKS 


LOVEBOMB 


lovebomb (noun): a handheld contraption built of thoughts, feelings, and idiosyncrasies, 
that initially smites one and eventually kills them with love. 


usage: She accidentally dropped a lovebomb in the midst of an unsuspecting crowd. 
Fortunately, most of the people escaped unscathed, however there was one casualty. 
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DEAR DEER 


Dumbo Art Festival2014 
1 Main Street 
Festival Lounge, Brooklyn 
NY 11201 


<< Dancing 1>> 


by Dear 
Dancing delights me. 
Dancing is mine. 

It is like Egg 
When I bake it myself. 
It is like eyes 
The day eyes was born. 
I singing as I wrote it, 
And clapped my hands. 
I will stop a stranger 
To show him Dancing 
Because it delights me 
Because it is mine. 


Originally written by 
Rich Accetta-Evans 


09/24/2014 


Thank you for writing a poem 
with us 
email :hi.yutingfeng@gmail.com 


YU-TING FENG 


There are more than 5,000 poems created and printed with Dear Deer. 
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Lu (2013) ri ‘ 
Pe Gat Sizecoding 
Tiny Executable Art DSYNC // 32 Bytes 


Sizecoding is the art of creating a very tiny DSYNC or “Diagonal Synchronisation” is a play on the 

program for a specific computing platform technical term HSYNC (Horizontal Synchronisation), a 

‘ These programs are made in the assembly signal to tell the computer monitor to stop drawing the 

Beco nmanmopile phone language for the processor (CPU) used by the current horizontal line and start the next. Using exact 
system. The 6502 was a popular CPU in the timing a diagonal color pattern is produced. The 

The Liime collection won the Jury Prize in home computers from the 80s, e.g. Apple, program runs on an Atari XL/XE home computer. 

the Aesthetic Category at the 17th Atari, Commodore and BBC. There is still a 

fanatic community for these old systems which 


nowadays we call retro computing = —————SE ——— et 
Demoscene ee | 


There are sizecoding competitions organised 
within the computer art subculture called 
“demoscene”. Demos are usually categorised 
by the allowed size of the executable program 
The tiny size categories are 256 bytes, 128 
https://datable.net bytes or sometimes even smaller 


Lime is an electronically infused clothing 
collection which integrates dynamic, user 


customizable elements driven wirelessly 


International Symposium of Wearable 


Computers (ISWC) in 2013. 


pan 
Android app which controlled the 


garment color via bluetooth. 


elizabeth@datable.net 


luis@datable.net 


6502 Machine code 6502 Assembly code 


A2 00 8E 2F 02 AO AS 8D ldx #0 ;x=0 
01 D2 8D 00 D2 29 FO 8D stx 559 ; DMA off 


1A DO AD OB D4 65 14 8D lida #$a8 7 audio control 
1A DO 18 90 ED sta $d201 7 pure tones, volume 8 


colors 
sta $d200 ; audio frequency = a 
and #$£0 filter color bits 
sta $d0la ; store a in background color 
ida $d40b a = vertical line counter 
ade 20 ; a = a+ frame counter 
sta $SdOla 7 store a in background color 
elec ; ¢ = clear 
bee colors ; jump to colors 


FHREADY, 2021-09-11 
GitHub: https://github.com/FreddyOffenga 
Demozoo: https://demozoo.orq/sceners/35273/ 
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contact with 
g to code helped me to 
understand how digitization shapes our 
environment. How it influen our 


mental and material realities. And it allowed 
me to get politically and socially in: 

volved in today’s digital society. Without 
the Processing Community, none of 

this would have been possible. Jk, lh. dl. 


Time Code Time Painting follows Yoko Ono's 
instructions and creates a computational 
drawing that is constantly present but 

only visible at a certain point during the day. 
To illustrate the changing light conditions, 
the color of the painting is evolving 

over a 24h cycle showing 360 different 


colors. 


Time_Painting 


MAX FRISCHKNECHT 


Can you find the drawing? > 
https://maxfrischknecht. github. 
io/Time_Code_Time_Painting/Code_ 


O/1 Black/White On/Off Dead/Alive is a 


hai 


Q- 


TIME PAINTING 


Make a painting in wh 

cones out only under a 

at 2 certain time of the day. 
Make IL @ very short time. 


1967 summer 
Yoko Ono 


noi 


collection of works based on the concept of 
Cellular Automata. An exploration of 
complex visual patterns based on simple 
algorithms with an evolutionary be- 


ior. The works served as a starting point 


for a workshop on «Weaving Scripting 
Writing» at ETH Zurich Architecture 2019. 


Check the source > https:// 
github.com/maxfrischknecht/ 


1-Black-White-On-Off-Dead- 


a 
i= 
Wildy? 


11:40:11 


Allegoria is a series of experimental video 
installations created in collaboration 

with fashion designer Anja Bodenmann. The 
film footage taken during a photoshoot 

was subsequently alienated Processing’s 


ise function. 


Collab? Say hi! 
https://maxfrischknecht.ch/ 
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+ ie Medialab-Prado, Madrid 
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En 2013 creamos una plataforma para que 
cualquier persona con conocimientos de 
processing pudiera programar y enviar sus 
sketches a ala fachada digital de Medialab- 
Prado. Desde entonces y su cierre en 2021, 
hemos lanzado diversas “open-calls” en las que 
hemos recibido y proyectado cientos de 
sketches de todo el mundo. 
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function d; 
background 
translate 


tor (let i 
let current 
beginShape() ; 


for (let 7 
let x = shapi 
let y = shapes(t 


let angleNoise ~ 0) 
anglelloise = cos(sin 


curveVertex( 
x + map(angleNoise, o 
y + map(angleNoise, 0, 
Vs 


currentShape.push({ 
xX: x + map(angleNoise, 0, 
y: y + map(angleNoise, 0, 

YD; 

t 


curveVertex(currentShape[0] .x, cure 
curveVertex(currentShape[1].x, current 
curveVertex(currentShape[2].x, current 
endShape(); 
t 
G 


function init() { 
rosotMatrix(); 
let weight = 2 + random((width+height) + 0.0601, 
strokeWleight(weight) ; 
stroke (50) ; 
xoff = random(@.0901, 9.001); 
yoff = random(@.0901, 0,001) ; 
zoff = random(@.0901, 9.001); 
shapeXOf£ = random(-width/2, width/2); 
shapeYOf£ = random(-height/2, height/2); 
shapes = []; 
line_gap = random(2, 5); 
let size = random(15, 30); 
while (size <= width-width/3) { 
shapes. push(buildShape(size)); 
size += Line_gap + random(1ine_gap); 
© 
r 


function buildShape(size) { 
let shape = [1; 
for (let i = 0; i <= TAU; it-(5/size)) { 
shape.push(ix: size * (sin(i) + size/shapeXOff*zoff), y: size + (cos(i) + size/sM 


xetuzn shape; 


derek_morash / gammastop https: //editor.p5js.org/derekmorash/sketches/KOnomgXxVI 
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"I fell by the Eiffel tower" 


ANANYA GANESH 


10000 01110010 01101711 01100011 01100101 
(0011 01101001 01101110 61100111 00100000 
(0100 00100000 01100001 01101100 01101100 
(0100 01101000 01100101 00100000 01111001 
10001 01110010 01110011 00100000 01101111 
(0000 01100110 01110010 01107001 01100101 
10100 01110011 01101000 01107001 01110000 
11010 01000001 01101110 01100100 00100000 
(0010 01100101 01100001 61110100 01101001 
1001 01110100 01111001 00001010 01010100 
0101 00100000 01100100 01101111 01101111 
10011 00100000 01110100 01101000 01100001 
10000 01101111 01110000 01100101 01101110 
10100 00001010 01000001 01101110 01100100 
10100 01101000 01100101 00100000 01110111 
1110 01100100 00100000 01101111 01100110 
1111 01110000 01110000 01101111 01110010 
(0107 01101110 01101001 01110100 01111001 
0100 01101000 01100001 01110100 00100000 
10001 01101110 01100011 01100101 01100100 
11001 01101110 00001010 00001010 01001000 
10117 00100000 01101700 01110101 01100011 


10017 00700001 
0000 0110110 
10100 0000101/ 
10010 0111001( 
10101 00100001 
0110 0111001( 


1117 0070000( 
0000 0110111 
1111 0111010 
1007 0110010 


(0107 01711001 
10101 0010000( 
0000 0110111 


10100 001 0000( 

10010 0110100 

loo00 01110101 

(0010 0111010 

0010 0110111 

1117 0110011( 

0101 0110011 

1010 0101010 

1001 01101100 01100001 01110100 01100101 
0000 01110000 01110101 01110000 01101001 
(0017 00100000 01101111 01100110 00100000 
1110 01100100 01100701 01110010 01110011 
(0001 01101110 01100100 01101001 01101110 
10000 00001010 01000001 01101110 01100100 
10101 01111000 01100011 01107001 01110100 
1101 01100101 01101110 01110100 00100000 
10110 00100000 01110111 011071000 01100001 
(0010 10000000 10071001 01110011 00100000 
1117 01110011 01170011 01107001 01100010 
10101 00100000 00001010 01010100 01101000 
10000 01110011 01101000 01100001 01110010 
1110 01100111 00100000 01101111 01100110, 
0011 01110100 01101111 01110010 01101001 
10011 00001010 00001010 00100000 00100000 
10000 00100000 00100000 01010100 01101000 
(0000 01110011 01101000 61100001 01110010 
1110 01100111 60100000 01101111 01100110 
10100 01100101 01100011 01101000 01101110 
(0001 01110101 01100101 01110011 00001010 
(0000 00100000 00100000 00100000 00100000 
10000 00100000 00100000 00100000 00100000 
(0000 00100000 01010100 01101000 01100101 
10017 01110010 01101001 01110100 01101001 
0101 01100101 01110011 00001010 00001010 
1000 01100101 00100000 01101100 01101111 
10101 00100000 00001010 01010100 01101000 
0000 01110010 01100101 01110011 01110000 
10011 01110100 00001010 00001010 01010100 
10000 01110100 01101000 01107001 01110011 
0011 01101111 01101101 61101101 01110101 
1001 01110100 01171001 00100000 01110100 
(0001 01110100 11100010 10000000 10011001 
(0000 01100111 01101001 01110110 01100101 
(0000 01101101 01100101 00100000 01110011 
10000 01101101 01110101 01100011 01101000 
10100 01101000 01100001 01101110 01101011 
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Processing it all 

The years of friendship 

And creativity 

The doors that opened 

And the wind of opportunity that danced in 
How lucky we are to process this moment 
To breathe our fresh air of kindness 


To push our boundaries of belief 


To explore the poetry of code 
And experience the brushstrokes of thought 


The dilated pupils of understanding 
And catalyzed curiosity 


The sharing of stories 
The sharing of techniques 
The critiques 


The love 
The respect 


To this community that’s given me so much 
Thank you. 


Sofia Garcia 
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Brightness Current Pixel- HSB: 46, 46, 45 


Ru vty, 


Freq. 2 Vol 


Re: Perception is a soft- 
ware artwork consisting 
of two applications. The 
first application generates 
images from audio input 
and the second generates 
audio output from pixel 
data stored in the resul- 


@GARRETTBELEU ARTIST 


wily, 


S 


Input Vel 


Freq. 1Vol 


Re: 
Perception 


The audio-to-image 
application (above left) 
analyses input audio to 
extract the three most 
dominant frequencies. 
Those three. frequen- 
cies are stored as HSB 
color values that popu- 
late an image. Com- 
pleted images are 
saved as png files. 


Saturation 


Brightness CurrentNotes- HSB: 0, 0, 0 


Freq. 2 Vol Freq. 3 Vol Playback Speed 


The image-to-audio appli- 
cation (above right) plays 
HSB color values from 
png files as three separate 
sine wave frequencies. 
Controls to advance to 
next “audio-image” as 
well as change sine wave 
volumes and_ playback 
speed are included. 


@garrettbeleu 
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CIRCLE PACKING TYPOGRAPHY 


HTTPS://WWW.INSTAGRAM.COM/GENETYPO77/ 
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COEVO 


A 2D physically-based environment with artificial 
agents that create 2D solutions for given problems 


“Create an object that moves through an inclined plane’ 
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twitter, instagram : @gin_graphic 


GIN_GRAPHIC 
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Imagine if the architecture can change shape based on people experiences... 


is an interactive structure with a facial emotion recognition camera 
that changes its color as well as the pattern to reflect the viewer's expression. 


Form Study: Pleat Tessellation Origami 


1.Train the model via Teachatle Machine 2.Run tho code in p&.je 
a 


aaaaaas — el 
1 Aasaoas B. 
Capture user = 
£22241 
Train the modet: 
ain the mode! a 
Tu Emotion Detection la —e( Dataset Jee! Neutral 2.Set up servos and LEDs on Arduino Uno board 
sad 
Run the model 5 
esponse t 
pS.js gam 


15 Serial Control connect p5jsto Arduino 


4.Write the code in Arduino 5 Test the Model 
ARDUINO 


https://www.youtube.com/watch?v=jpua7CgM140 


Happy face detected 


The origami will dance, and 


see iat The origami will close, and 
the color change to blinking _ original state, and the color 
green. 


the color change to purple. 
change to white. 


Natural face detected 


Sad face detected 
The origami will come to its 


Link to project video: https://www.youtube.com/watch?v=S8GY1EHmXPE 


ZAHRA GOLESTANHA 


Zahrasadat Golestanha 
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TWITTER: @GORILLASU - BLOG: GORILLASUN.DE 


CON 194 


jburpoa aniyeauo fo suvad auow AueWoy 
> aag| pur Gd ‘hussasoud yj apeyy 


BSSnoy peUYyL? — UNG E]]OH 


o1 
Oo 
oOo 


Movement Processing is 
Experimentation and Iteration 


Various parts of a generative design need to be developped 

when implementing a new idea. 

The output often reveals unexpected visual results which 

inspire to experiment further. 

Capturing a frame each time the code runs during development 
gives a unique insight in the algotrithm and design decisions. 
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I like making art with 


Processing. I think the most 
appealing aspect of creating 
arts with Processing is the 
ability to bring movement to 
the art. I'm not good at 
creating beautiful designs, but 
I can and do like to create 
interesting movements. 


Even if it doesn't use 


_—) complicated shapes, I can 
= keep looking at it as long as 
the movement is interesting. 
SSS I would like to continue 
looking for movements that I 
find interesting. 


“INS 


My arts are in the following 
repository! 
https://github.com/gotutiyan/ 
generative-art-Processing 


Result 
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// Alien Blob 2.1 (Feb 15 '06) 
// based on formula by Jim Bumgardner 
// implementation by Ryan Govostes 


xoff = 0, yoff = 0, zoft = 07 
sineTable[ ]7 
t aPablet]; 


d sotup() { 
size(256, 256); 
colorMode(HsB, 2); 
background(0); 
noiseDetail(1); 
// framerate(24); 


// precalculate 1 period of the sine wave (360 degrees) 
sineTable Float [360]; 
4 < 360; i +4) sineTable[i] = sin(radians(i)); 


[width*height]7 


if (x == ox 66 y == cy) { 
dtable(n] = 0; 


{ 
drable[n] = log(dist(x,y,cx,cy)); // another fun one... 
able[n] = dist(x,y,cx,cy) * .05; 


a ee ae 
LoCo Wa _ easy Se eT, 


|) 293, ws er Por df _ 


law eveceT- Feo THe 14ae. 
| 


ht / 27 
£ offset = 0; 


11is()+ 

= sineTable[ (m>>3)%360]; 
= sineTable[ (m>>4) #360]; 
= sineTable| (m>>5)%360]; 


loadPixels(); 


dTable [offset]; 
(d <= 3.5) { 

n = noise(xx, yy, zoff)*(1tvarn*.5); // noise only needs to 
// be computed once per pixel 


/ use pre-calculated sine results 
+ sineTable[int (degrees(d + n *(3+varH*2))) & 360]; 
ineTable[ int (degrees(d + n * (Stvars*4))) % 360] + 1; 

ineTable[ int (degrees(d + n * 3)) % 360] + 1; 


termine pixel color 
1s[offset] = color(h, 8, b); 


offsett+; 
// increment xx 
sx += 0.0625; // = x/16.0 


value only needs to be changed once per pixel line 
+0625; 


// wove through noise space -> animation 
xoft 
yort 
zoff += 0.1; 


updatePixels(); 


Data Imprint 


Gramener 
gramener.com/dataimprint 


How to Read It 


Name 

Letters of yourname-Shape 

Length of yourname-Color 

a ' z 

° 
hy 
John 
a 
Interests 
@ Arts @ Science 
Politics ®@ Literature 
01 2 3 10 


4567 8 9 
¢0o000 00 0 
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Unread emails 


Social Tweets 


Everyone's different: from our names and 
habits, to our social preferences, we set 
ourselves apart as unique bundles of traits. 


This generative data art project aims at 


capturing the distinct portrait of an individual. 
Great for badges, bookmarks and mementos! 


ft is your name? 


Sheidon Lee Cooper 


What interest: 
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FUZZY CLOUD 

Processing Script: generative growth system 
3D Print: Stereolithography 30x15x15cm 
by Alexander Grasser, 2013 
alexandergrasser.com/FUZZY-CLOUD 
@grasser_alex 
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Creative Coding and Computational Art 


Processing 
for Flash Developers 
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Processing 
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ira Greenberg 
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Deepak Kumar Rede 
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that’s all I’ve got to say. thank you for listening. 
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These trees are magnificent, 

but even more magnificent is the sublime 
and moving space between them, 

as though with their growth it too increased. 


Rainer Maria Rilke 


There is a warm and knowable expansiveness 
in the act of drawing. Those two axes, that 
blankness, are universal. Drawing is the first 
inconceivably complex possibility space that 
many of us encounter. Despite this, there is 
something definitively accessible about 
drawing. 


Drawing never feels exclusive, never insists 
that anyone should not explore or 
experiment. The boundlessness of drawing is 
a commonly-held good. The vastness of the 
act is inviting, not alienating. It feels like 
anyone can find a new way to speak color, to 
excavate texture, to defy composure, to 
suggest a path for the eye. The tilting and 
gliding of hand across surface, the trailing 
mark, these are not secret knowledge. 


P| Fa [23] 


Code is a line etched into the possible, a route 
for matter that has been charged. Coding lives 
both inside and outside of social and political 
life. Unfortunately, so often it carries the 
baggage of supposed expertise. Gatekeepers 
insist that coding belongs to a 
specialized-class; that it is historically 
inherited or fundamentally inaccessible. But 
we know that they aren’t right and this move is 
meant to hide something ancient and 
mischievous. For this too is a canvas, a 
contiguous shape; a stage for procedural play 
between ourselves and others. 


This show brings together an archive that 
demonstrates code as a medium of 
exploration, of learning, of vulnerability, of 
curiosity. These are snapshots of artists 
feeling it out. They are windows into an 
uncomplicated delight. 


- Stalgia Grigg 2.25.2020 


STALGIA GRIGG 
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www. wikinhow.com/Make-a-Zine has Tolding instructions as do many other sites. 
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Hey! I’m Sarah GHP. > o } 
Once upon a time, I > 4 ot 4 
was just a little > Tis Ny 
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goblin who didn't know 
much about coding or 
BEALE S Be CHE art — I just designed 


where I learned about 
openFrameworks, writing 
libraries, Arduino .. 

and even a little Processing! 


Julia Lau! 
Claudius L: 


eu data visualizations. 


mit Beitragen von 
Joey Lee 
Niels Poldervaart 
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Ops #1 


[2400x2400] - 700 circles in grayscale. 


"14021982" was used as random seed. 


Generative image created with code (p5.js, javascript/canvas). 


NFT minted: 2021-05-12 — editions: 10 


By Nuno Guedes Silva 


http://nuno.ws/nft 
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@marioguzzzman https: //www.mario-guzman.com/ 
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Made with Processing. 


Bilge Giinay from Dist Collective 


‘t in a way that 
keeps us 
connected to 
earth, ourselves, 
and each other 


(@distcollective) 


design> @lm.mariscalma 
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HANIF HAGHTALAB, NOISE FIELD STUDY 


XIAOXU HAN 
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OLIVER HANSTEIN (NODEART) 


Planting a Tree 


A kneeling woman, planting a 
tree. Redrawn from the motive 
on the German 50 cent coin 
from before the EURO. 


Homage to Josef Albers 


“Homage to the Square“ 


3D terrain generation with 
Perlin Noise behind semi- 
transparent squares. 
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I first heard about Processing (or what was to become 
Processing) in 2001, when Casey Reas told me about it. 
We were both doing a residency in Italy and | must 
admit that, while | applauded the idea of expanding 
access to coding tools and making it quicker and easier 
to get useful results, | didn’t think it had much relevance 
to my own work in interactive architecture and 
environments. It wasn’t until a couple of years later, 
when | asked Casey to come and talk about it to my 
students in Unit 14 (a.k.a. the Interactive Architecture 
Workshop at the Bartlett School of Architecture) and 
he showed us an astonishing variety of things that 
people had created with it — in particular controlling 
things in the physical world! — that | really began to 
understand the potential it offered.Apart from all the 
other stuff (which was obvious to others, but had taken 
me a while to grasp) he showed how it collapsed the 
distinctions between concept / sketch / prototype / 
experiment / tool / input / output / finished work — and 
this is exactly what I'd been trying to do in my own 
interactive architecture work. 


Once Arduino appeared on the scene (and Firmata! Oh 
Firmata!!) the deal was sealed, and | ended up using 
Processing in almost every project | did for 15 years, 
even if it didn’t drive the ‘final’ thing. | used it to control 
and manage sensors and actuators; to explore what was 
eventually to become Pachube; to design interfaces for Evoke (2008) 
responsive physical environments; to create an energy 
monitoring app; to drive cathedral facade and building 
scale projections and even massive water screens on 
beaches. | used it to build email processing scripts, and 
data visualisations once Pachube was dealing with tens 
of millions of data points per day, and to analyse real- 
time audio from an acoustically coupled neural network. 
I've used it to simulate coral growth, to design a massive 
urban laser event, to give voices to mussels underwater, 
and even to control the visuals in an interactive pedes- 
trian crossing. Through it all, the P5 community has been 
an essential part of the process — learning from others, 
always learning, and, occasionally helping others (I 
hope...) and witnessing the same joy emerging in their 
faces as they experience a new paradigm of creativity. 
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But one of my fondest memories of Processing is from 
Christmas Day 2019, when Ling and | just wanted some 
gentle peace and quiet. So we sat on our bed, gently 
coding in the Processing IDE, side-by-side. Marital bliss. 


Thank you Casey, Ben, for kicking it all off and thank you 
to the thousands of others that have made it flourish. 


— Usman Haque * haque.co.uk Xmas Day (2019) 
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Langzeit 


An image 

slowly rendered 

pixel by pixel 

each one 

from another point in time 


The string of RGB values 
not just an image 

but a timeline 

telling about movement 
light 

and change 


or) ees 


6. 
eed 


S. 
Josee0% 


void draw() £ 

if (cam.available() == true) { 
cam.read(); 
cam.loadPixels(); 
langzeit.loadPixels(); 
langzeit.pixels[x] = cam.pixels[x]; 
langzeit.updatePixels(); 
X++) 


8. x 3 
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Hej! lam Julian. 

lam an avid Processing user and have been using it for i 
the last 12 years — as a tool to funnel ideas, to realize ee een 
physical media installations, teach coding to new fae 


students and explore my own creativity. 


ig julian_hespenheide / www.julian-h.de 
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Down Sagenmaschine at GRIMMWELT Kassel, DE with 


Studio TheGreenEyl (2017). Left ,,Rare moments of light. Running Processing 3. 


Avisitor is getting analyzed by a Machine Learning app Permanent exhibition at Neues Bauhaus Museum Weimar, DE with 


and gets translated into a Brother‘s Grimm fairy tale. Studio TheGreenEyl (2019) 
—_——————— Up Processing Tool with different modes to contro! the installation. 


Up For Jianping He (graphic designer) his hole body of works of the 
last 20 years was sorted and displayed with a quad-tree algorithm as 
an entrance gesture for his solo exhibition. 

V&A Museum Shenzhen, China, with Studio TheGreenEyl (2020) 


PL Left Staging Absence. New Media Installation. Work for Irena Kukrie 
Controlling Curtains, Lights, Sound and Airto stage a play without human actors. (2016) 


Down Excerpts of an ongoing experimental animation series in 2D with ASCII Characters (2021) 
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JULIAN-ANTHONY HESPENHEIDE 


Tyler Hobbs 


| ma g nN at on by Hevey (@HeveyArt - https://hevey.art) 


From top left, clockwise: Fidenza #564 (2021), Elektroanima 
0.8 (2020), Progress 1A (2018), Progress 1B (2018) 


HEVEY (@HEVEYART - HTTPS://HEVEY.ART) CON 225 540 TYLER HOBBS CON 226 041 


THANK YOU, PROCESSING COMMUNITY! 


ROBERT HODGIN 


Buddha Machine Mirage 


@hoehoe 


"Buddha Machine Mirage" is a prototype of a machine that 
projects ambient images. It was developed to be a device 
that you can watch while listening to ambient music. 


The internals consist of a RaspberryPi and a panel of LED 
modules, which are controlled by Processing. It can be run 
standalone. 


The image displayed by Processing is written in GLSL 
Shader, and the image pattern changes in a certain 
amount of time. The parameters can be changed using the 
knobs on the front of the panel to give changes to the 
image. The Shader can also be rewritten over the network. 
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7 days of earthquakes in Japan 


JONA HOIER 
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167372041 
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KATE HOLLENBACH / @KJHOLLEN 
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MICHAEL HONEY (TWITTER: @MICHAELHONEY) 


The cpu and gpu go hand in hand. 


It combines fractals 
created by Processing 
with effects created by 

GLSL. 


It is a generative 


process, so it 


changes variously 


with time. 


michaelhoney.com 


Author 
@HosodaMath 


Come visit us on Twitter and Github! 
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JOHN HOUCK 


548 
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JIANGNAN HOU, IG: @JIANGNAN_NICHOLE 


TOBY HOWARD @TOBYHOWARD CON 235 HTTPS://HUAIGULIN.GITHUB.IO/ CON 236 


NICK HUBBEN/@KLAUSHUBBEN CON 237 HUBSTRUCT CON 238 


CHRIS HUNT AND BEN DUNKS 
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@DECONBATCH 


New Frontier 
by @deconbatch 
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BILGE GUNAY (DIST COLLECTIVE) 


FpN Collection 


In my artworks, i experiment with 
different noise types and flow 
field algorithms. Some of these 
artworks are interactive and can 

be found at hic et nunc. 


Generated with p5js. 


Ilgin igézi from Dist Collective 
(@distcollective) 
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I've made a lot of sketches with 
Processing and p5.js over the 
years, but some of my favorites 
are physical things that are 
generated by sketches. 


Anti-dot 
lamp 


This lamp is one of my current 
favorites. It's a bit wonky and 
not that well-made, because | 
put it together in about an hour. 
But it makes me happy 
because it's a physical thing 
that began as a piece of 
software, and was made 
spontaneously and quickly. 
Most folks look at it and have 
no idea that it was ever 
software, and that's how it 
should be, to me. The p5.js 
sketch from which it came was just a means to an end. 


The lamp is cobbled together from parts from lamp stores. To create the pattern, | modified 
a circle-packing algorithm from one of Dan Shiffman's tutorials. | added Zeno Zeng's SVG 
library. To get more context for SVGs, | looked at Processing's SVG and DXF export 
libraries and Rune Madsen's rune.js, all in the Processing family. 


The output was a sketch that generated an SVG file that | could take to the laser cutter with 
a sheet of construction paper, and the job was done. When my colleague Danny Rozin saw 
it, he dubbed it "the anti-dot". 


| made this for a lighting class, to show students that even if they only had experience from 
an intro programming Class, they could still use those skills to make and customize 
physical things. To me, that has always been the value of Processing and the tools it's 
inspired -- not just tools to make images, but to help people to realize how they can affect 
their world. 


-Tom Igoe 
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Thanks Processing for EVERYTHING... and Happy 20th! -Incre.ment 
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Community 
Day 2019 
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Processing 
Community 
Day 2019 
Bari 


Ls | www.codiceinutile.org 
= @codiceinutile 
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EXPERIMENTAL CLOCK | MARCINIA JACQUET 
PROMPT:DESIGN AND CODE AN EXPERIMENTAL CLOCK THAT EXPRESSES A NOVEL WAY OF 


TRACKING TIME. 


BIGAC 5 


This is an experimental project developed with r 


SIGNOS is a web-browser based video recognition platform that 
recognizes libra (brazilian sign language) signs and translates 
them into written words. 


js and ml5js 


| was to make videocall conversation less unilateral. 
1 Cé speak nave everal sub ling toc tO ave their 
y of communicating translated for those who 1t hear, but the 
opposite is not that common 


Brbemesneuent 
Seth mon sore e BORE 


This MVP version of the sign-translator contains 3 signs: “Hello”, 


inderstand” and “Query”, res{ i ndi ’"Duvida". 


The subtitled video can be sent to platforms like OBS Camera and 
then streamed to any videocall app such as Zoom and Google Mee 


If you'd like to know more about this project please contact me 
at @isabelazamith. 
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An Experimental Clock | p5.js 

Mahima Jain | 09.2021 : 
Community .is about connection. 
Through connection we learn. 
Through learning we grow. 
Through growth we create. 
Through creation... 


We met bratns. 
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This project is a representation of me trying to believe in nature and 

allowing things to happen naturally. Not worrying about shaping things, or : 

controlling something that doesn't want to be controlled. I enhanced the Jonathan Barbeau 
static illustration by coding the 2D eyes over it and each eye ball’s position a 

depicts time in hours, minutes and seconds respectively, from left to right. i @ijbarbeau.art 

I was able to bring my illustration to life and add another depth of meaning 

with the dynamism that javascript allowed. #GenArtClub 
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JEFF (IPPSKETCH) 


@realDonaldTrump 


Donald Trum itter activity during 
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Me opening Processing Alpha 048 
in 2003 for the first time ... and ever since. <3 
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COLMAR VISITEURS 


Processing 
Community 
Day2019 


Above is a series of drawings | made for Processing Community Day 2019. These 
drawings were distributed as signs for the themed tracks at the event. The track names 
were "Under the Silicon, the Beach!" (top-left), “Accessibility, Disability, and Care” 
(top-right), “Radical Pedagogy” (bottom left), and “Epic Play!" (bottom right). 


| came up with the idea of incorporating images of hands and computers after 
researching logos related to disability. By turning the hands into icons, they become 
more open to interpretation than in their functional purpose in a programming context. | 
want to emphasize this hands-on DIY or creative energy of the event, and | think hands 
are a really good indication of that. 
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We are seeking a graphic designer to design the identity and website for 
p5.js, a new JavaScript library for creating graphic and interactive 
experiences, based on the core principles of Processing. The project will 
involve creating a logo and identity for p5.js, as well as working with 
us to design the website that will share information, documentation, and 


links for the project. 


The site will be closely linked with processing.org as we are working to 
maintain a connection between the two communities, but it will have its 


own visual style and design language. 


Jerel Johnson 
Identity Design for p5.js, website, and initial Ul designer for the online editor. 


| have a confession to make. | find working with others whether 
ona team or ina band or for a school or an organization or a 
company energizing, but | struggle with feelings of belonging. 
When Lauren McCarthy shared the call for entries for this Catalog 
with me | was reminded of how committed to holding space for 
each other the Processing Community is and has been. | wanted 
to say Thank You to the community for being generous and open. 
My gratitude is for everyone. There is space with you and for you 
because of you. All the feels. 


Thanks to Reas and Fry's 2007 Processing: A Programming 
Handbook for Visual Designers and Artists | quickly moved from 
casual learner to someone using Processing in school a few years 
later; but, it wasn’t until Spring Semester 2014 when | answered 
the email (above) that | began to contribute to the community as 
a designer and, adjacently, as a Creative Coding instructor. So, in 
what remains here, I'll add a few early p5.js design recollections: 


* It was important from the start to express a situated, embodied 
perspective in the visual identity for p5.js as it related to the 
goals of p5.js’s creators. | felt we all connected around a shared 
understanding of p5.js coming from a particular yet polyvocal 
place and that there was a tremendous power in that. 


* It took a good number of color studies to tune our pink with the 
Processing Org identity while also being respectful to the brand 
identity of other creative coding frameworks. 

* | instantly loved the asterisk symbol for the p5.js identity. | took 
to its capacity to express p5.js as a multiplier with verve. It gave 
us the foo of Processing times the bar of JavaScript taglines. 


*1'm confident this was the first time | had a meme in a branding 
presentation (and it wasn’t the last). 


JEREL JOHNSON 


Early Identity development notes 


To start, we take the name as it is: 


p5.js 


We see the power of Processing ideas 
multiplied by the reach of JavaScript 
by introducing the asterisk symbol: 


po.Js 


And, further emphasize the ideas of 
Processing by removing the j dot: 


p5.Js 


Finally, we adjust and redraw for 
openness and formal resonance: 


pd.Js 


" 
Wow. Such taglines. . 
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latin 


5 


https://www.behance.net/gallery/MS693983/Society for more detial 


One of my college projects, the project brief is to create an ecosystem (Reference 
from ‘nature of code’ exercise). 


: | see society as an ecosystem because humans and humans interact with each 
AS ©) seek “% other, sometimes we help each other, sometimes we having haters. 


® ~ m i 3 . _: In this project, | simulate 3 types of human in an abstract way, Human bot (person 
. Z Tex J who work forever), Dreamer (wanted to chase their dream) and Killer (bad people 
r- that keep destroying others) 
ae 


4 


20 shapes of blue 


01.01.2017 - 31.12.2017 
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One of my earliest experiences coding was with Processing. 


Before, | had tinkered around with microcontrollers and made 
LEDs blink, but through Processing, | was able to first see my 
thoughts articulated through code. | was able to learn the 
building blocks of programming, and with those blocks, | was 
able to build a connection between software and hardware. 


“Robot Clone 


——— 


From ‘Hello, World!’ to sensors and motors, Processing allowed 
me to take my first steps into the world of physical computing. 
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VERGINIYA KADINA, @G.I.N.LY.A CON 269 584 MAJA KALOGERA CON 270 585 


thes Pest Present, and Eure 
Of p5.jS SHOWCASE showcase.p5js.org 


As a late millennial teen, my pastime was tweaking the HTML/CSS themes for my 


Tumblr blogs. As an undergrad at NYU in 2014, I learned to code in Processing, 
HTML, and CSS in classes taught by ITP and CS (CAS). As a Google Summer of Code 
(GSoC) participant mentored by Kate Hollenbach in 2019, I created pd.js 
Showcase to celebrate how people are using pS.js to make creative work, 
learning, and open source more interesting and inclusive. In 2020, Connie Liu 
featured a stunning array of creators around the world. In 2021, I got to 


Volcano Modak 


In Indian mythology modak is considered 

to be an offering to The God Ganesha. 

| consider Nature as God 

and for the love of food ,various ingredients 
used in the making were explored. 

An eruption of sweet flavors is 

experienced once its popped inside the mouth. 


advise Katie Chan, who introduced a beautiful theme, “The Love Ethic.” 


As a grad student in computer science (MS 2022) and a woman of color of the 
Korean diaspora in STEM, I am in awe of how I keep finding ways to give back to 
a community that expands access to technology and creativity. 


Ashley Kang (22) 
October 1, 2024 


Processing 


Community 


Day2019 


Ss a 
eo1sd 12 20194 5al-8a 202084 ea 20204 5a-sal 
PCD a LA NYU ITP Camp Showcase launch Connie Liu®| 
a p5.js v1.0 202014 
Feat SIE he Release Party howcase .p5js.or 
Code/Processing 
As an invited speaker at Foundation: Ashley Kang2} 
PCD Seoul on August 21, 201914 pSis.ora/showcase 


2021, I presented (in 

Korean) this timeline of 
the past, present, and 

future of p5.js Showcase z 
(4A|0|4) on the occasion re 7 
of Processing’s 20th 
birthday. For future 


20214 52-82 


Showcases, I would like Katie Chan2| 
to manifest more themes, 202114 showcase.p5is.org 


(#Al: The Love Ethic, $442! creatorS) 


curators beyond GSoC, and A 
...coming soon! 


translations. 


Special thanks to Lauren, > 


Medium : Pixels Kate, Evelyn, Saber, 


P . FLIE]; QYoj-syo] Hoy CH8}4: Google Summer of Code #44 
Tools : Processing , Rhino + Grasshopper, Spark AR ,Adobe Illustrator Connie, Yining, Joey. ae 
Objective : Algorithmic Exploration of Form ,Pattern Katie, Sam, QT, Jiwon, Sole, Ulst, ASH, Joseph Hong, ofa SHO call for student project 
; ; Alm Chung, and more proposals open a 
Yinhwa, Roni, Phuong, : summerofcode .withgoogle.com 
Dae In, Q, Casey, Louise, Katie Chan] 20214 Showcase (Processing Foundation®| open source 
ua Ee. 
Moon, Xin, and their UGA software ZEAE) 
students. 202214 pS.js Showcase 4A] idea? 
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Dissociative —— 
aatace 


A postmortem of familiar perceptions. 


This parametric model allows one to dissect 


DISSOCIATIVE 


P3js-Model © ixthu Kanth 2021 


the letters along with their grids, that we TYPEFACE 
write, speak, hear and even think in. 

) LETTER: 2 
In his essay "Art:as Technique", Viktor aneerene: 
Shklovsky put forward the concept of 
Defamiliarization (making strange) where he CRELHBIGHT: 
states that: "Our perception of the world has a 
withered away; what has remained is mere Seo 
recognition. It is the function of art to renew ARTS 
our perception. What we are familiar with, we + 2.Grid 


‘3Dynamic-8G 


cease to'see"! By making everyday objects 
unfamiliar, we prolong the process of 
perception; thereby introducing a refreshing (aus 


oSTOP 


visibility, thought and curiosity in interpreting 
the things we have accustomed to. And 


nothing is more abstract than our languages, 
which we have accepted as granted; 


unquestioning the complexity of operations 

that relates the mental structure expressing 

the semantic content of utterance to its : 

physical realization. (Chomsky). 0) 


The letters’ we are very! familiar with become 
apparent with faster motion and stranger with 
static instances. And as Martin Heidegger 
remarked that it is not we who speak 
languages, but its the language that speaks 
us, this dissociative typefaces could imbibe 
new meanings to interpret the evolving digital 
cultures, 


Access this model online to find at 
(what point does a letter start 
becoming unfamiliar to you? 


INDHU KANTH, @BEING_INK (INSTAGRAM) 
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kasperkamperman.com/projects/eyecatcher/ 


KASPERKAMPERMAN.COM (@KASPERKAMPERMAN) 


Processing is my to-go toolkit. 
It's a sketchbook, and | love the 
diversity of work you can make 
with it. | rendered PDFs for laser 
cutting, designed LED-light 
controllers, and taught over 100 
students a year the basics of 
computer programming. 


I'm very proud of the EyeCatcher 
installation. It captures my love 
for tinkering and experimenting 
with Processing. Working with 
alternative inputs (computer 
vision eye detection) and 
creatively rendering images ona 
screen, figuring out algorithms 
and translating them into 
creative output. 


Kasper Kamperman 
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What does being a part/of the 
Processing. community mean to you? 


r'vé been building custom software tools to 
enable unique artistic, expressions, thanks to 
Processing and its| community. 


Ive Visual ormance¢ too] deve 


\ ae 


a i 


Interface 


Selected Performances 


NOS Visuals, Ways of Seeing, Daejedn’ Museum of Art, Seoul) South Korea\- 2019 
Bodensee Festival = Performance with Gabriel Prokofiev, Friedrichshafen, Germany -2018 
Exploratorium - After Dark: Extended Cinemas)> Performance with Amma Ateria, San Francisco, CA; USA - 2018 
BINDERY: Experimental Music Night - Performance WithYonathan Crawford, Sah Francisco, CA, USA > 2018 
Luminaty Expanded - Performance with Tit Russell (Avoidance Policy),San| Francisco, CA, USA > 2017 
Tracks and Echoes Opening. Night - Performance Matheus Coura and Keisuke Nakagoshly San Francisco, CA, USA - 2017 
Gray Area Foundation Unseen Series ~ Performance with Samantha Weinert) San Francisco, CA, USA - 2017 
TSU! Live - Saravah| Tokyo, Japan - 2017 
(Re)Constructing Nature - Performance with Amy Salsgiver DorSay = Borusan Contemporary Museum, istanbul, Turkey - 2016 
Audiovisual Performance - Performance with Volkan Ergen - Arkaoda, Istanbul, Turkey - 2016 
Midnight Orient Cafe NoiS - KC/Gtad; Belgrade, Serbia "2016 
Europalia Festival - Performance With Jef Neve ~ Flagey,,Brussels, Belgium - 2016 
Dogus Otomotiv New Year Celebration'Party = Volkswagen Arena, Istanbul, Turkey - 2015 
Signal Festival Opening Gala- Manes Gallery, Prague, Czech Republic - 2015 
Turkcell Starry Nights - Harbiye Cemil TopUzlU Open Air. Theatre, Istanbul, Turkey 2015 
AmberFestival Audiovisual Night = Performancé with Eser Karaga 3 Santralistanbul, Istanbul, Turkey 2019. 
International Animation Days'= Performance with Eser Karaca’—'Institut'Frangais, Istanbul, Turkey- 2014 
Dogus Otomotiv 20th Anniversary Performance - Curagan Palace, Istanbul, Turkey - 2014 
TEDxReset - Performance with Gorkem Sen, Alp Goksoyluér = Tim Show Center,|Istanbul, Turkey - 2014 
Opening of Scriabin Museum - Performance with Andrei: Korobeynikova > Scriabin-Museum, Moscow, Russia = 2013 
Deep Space MUSié =\Petformance with Maki’Nameékawa — Ars Electronica, Linz, Austria - 2012 


Related Links 
https://github.com/kocosman/NOSELib/ 
http://nosvisuals.com/ 


NOHIab Osman Koc 


Art Direction & Performance Creative Coder & Performance 
https://nohlab.com/ 
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HBA JJAlStSs Pst mi5.js AS Ul a thAAe 


202018 HSAs AST SCH ITPS| AAS BO} mi5.js Hed Bsoer & Hass 


FF 


HSEISLICH. LN CAA a gee 
baeiehs A Japanese designer, artist, musician, 
creative director, and professor born in 
Toyokawa City. His breadth of expertise 
ranges from interactive design, user 


Sete 

202014 128 25/0] BA AAS AAS ASst Sctol= ASA Ct. 
e Mag ote ae (1) 
eo 1g Bi THe (2) 


experience, and software development to 
live audio-visual programming and art 
installations. He has been practicing 
meditation and plays the guitar every day, 
and sometimes the didgeridoo. 


He graduated from the Interactive 
Telecommunications Program (ITP) at New 
York University (NYU) Tisch School of Arts in 
2002, and became a Resident Researcher. 


FAS 223), 

STS} 47} YASSOS WES [S| S20] AAAS ASAlS 7/80] Hat SOME AS+ES HASAILC. AH 
USAlSs| 22S OSE TASS (HMA) 7/S0] FAIA] SO, ASetPAS mis.js 20| kee BSeH Zest 
Ales SAS USQHSUC. 7/A7StS0| 127 ASSOLE, AStSS SSS SS AALS 1G AO LEA, O17] Let 
Set EAE SSA Stal OOF [oH SLICt. 


with Processing 


ASSO AAAAO|L} Best APA SAS US Bon, —PLt SISSLicCt ASS SHlst= ASAAME OfeHal aisot= 
SOAS $2 Wace ASHSLict: 


e Bete, Alsts He BHO AAU Be Ss 
As 


© ESOS, NPAs] S ASM SSS 71S] BH0] Me S 
© SA Sat 7lAlstSol] Hel Sastxlat AS Alek] spots = 


e ASA WSSSOl As We S 


[21] HSS Aq CRA] AE AOI Ol: 


e USAls M27 ea 
e HANS ZAnSOA Sola Jase BS 
© OAR S| SF Al SHH Oat! (Et tae] 
© AZAD 4 (SOTA) AMPMM KM 
Nothing the Same” - drawing and coding (-now) 
He has performed and presented his art works globally at various venues such 
Be sx i—ia— j i as FILE Hypersonica in Sao Paulo, Eyebeam in NYC, CENART Centro Multimedia 
1: S&S Training 2: S& Application 
a Center in Mexico City, and Inter Communication Center (ICC) in Tokyo. He 
20204 128 64, 2S 3A|-5A] 20204 128 132, 2 3A-5A] teaches media art and design in Japan 
oe We: Cee We: 
e =E|%{= H!Teachable MachineS 01 SH 7|AlStS © ml52} Teachable Machine =} ArSat #el0 
28 S2/7/7| DS 7|AlstS SHE zetst Se]A0/4 wS7 1 
© m5S Osa Aste Bel he Alri 7| © TASS 71S HAS WALSHE Ofe4 2A Stopes 7| Pee bce 
e JAlstSO] SA ASStEAl Stl =Slsb7] e SdZ0M We + Me 7Alsts SS Atel STH | 
e JAS AS2 O ade 27 Ses e JAStS SAE 7| Sat Lol Lao] Hot 8 2tsp7| 
Tetsu runs Tetraleaf, Inc., a media design company 
2u/S: PS Ae Yeo} Male FASS (FE LES ABA) FA JIS, OOA, ey Amy (EE SEZ). which handles various forms of production, and he is a 
i * cofounder of Field+Line, a creative partnership with 
ASA] HOste SSS pd js HEUE| NAMES 27 SAO SELICH. Jeff Feddersen. Installatio y rida Aqualium~ FAL project 
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Processing1.0 Alpha Reference translation el abel lc 
in Japanese ( HAs 


This page is an homage to the simultaneously very 
3 ] scared/courageous/confused/determined person | 
was 7 years ago when | first tried learning to code 
& made a bunch huge personal changes that 
eee Processing 1.0_ALPHA_» Refi x | ° ended up shaping so much of my life. 


Ca en es tetraleaf.com/p5_reference_alpha/ x &*®@ 


sa (API) Processingld, HBICHRANCEAP ERS 
MBSR CE SKSICF UT VENTUS z . L am e future 


Ream The first encounter with Processing by Tetsu Kondo 
ee ie My first meaningful encounter with Processing started with a short email to 3 
DPE TpEhe eae: Casey in 2002. | had just graduated from New York University's ITP as an : 
ee international student, and became a Resident Researcher under my great adviser — 0 0 
es S O fe) 


Red Burns, mainly researching physical computing and making installations and 
Structure #36 musical instruments. During my free and unique research period at ITP, | became 
interested in the gentle existence of Processing. | sent an email directly to Casey i ASD for left | arro nition 
and started:translating the reference pages in order to study this language in 7 
depth. From this point on, my creativity slowly but gradually spread as If from a 


yh) deep spring, and Processing became the starting point for creating the basic 
philosophy of my media art, design, and educational activities. It still has a great 
impact on my life. | vividly remember the beautiful encounter with Processing at Ihave to admit 
that time, and it will continue forever. Thank you Processing. Pisaknet Melero Reon something... 
eeeee ATET = 12:51 PM 7 © 26% q Se 
f maps.google.com 
Environment ieee 
Input/Output pee | 4 Google Maps 
width (aa) KAS A set) (eae OPE! 
height ae P| INSTALLED 
framerate() (7 -—4L—}) Mouse (727A) pixelst]} = 
deloy) (Fr-4) mouse (222.XH8) : 5 — 
an ae Documt * Coordinates (4%) a ~ | Directions FOR 8 Oo} 
noSmooth() (AL—ZXe 1 ary peers: PINE 
cursor() (7—Y/ Jb) icf js 
noCursor() (= YJvéEL) 
save() (t—7) r 
saveFrame() (PL —L $877) ad J : i 
mouseMoved() ( Typography O ation gota ard 
mouseDragged() (22.20 2 FIKF 5 
—— 2) e © playaga 


Alpha 1.0 Reference pages in Japanese (2002) 


Tetsu Kondo 


A Japanese designer, artist, musician, creative director, and professor born in Toyokawa City. His breadth of expertise ranges from interactive design, user 


"A Conversation" was my first self-taught Processing project. 
A pong game that’s played as a tense dialogue between two people 
sending speech bubbles back and forth 


experience, and software development to live audio-visual programming and art installations. He has been practicing meditation and plays the guitar every 
day, and sometimes the didgeridoo. 


Tetsu runs Tetraleaf, Inc., a media design company which handles various forms of production, and he is a cofounder of Field+Line, a creative partnership ‘Map cata ©2014 Googie 


with Jeff Feddersen. 
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Processing for Android — Current Progress 


Processing for Android helps to create Android apps with ease, including live wallpapers, 
watch faces and VR apps. As the android changes rapidly, there is a scope of improvement 
for Android Mode. Nowadays many people use Processing for Android, but few of them 
know the history of it. In an article, Ben Fry (Co-Founder @ProcessingOrg) mentions that 
he started working on the project with Casey Reas (Co-Founder @ProcessingOrg) back in 
2009. Yes, Processing for Android is more than 10 years old and still works great after 
these many years with the continuous efforts of the contributors including Andres Colubri 
(Project Maintainer- Processing for Android). 


| first came to know about Processing sketches through APDE which is an IDE to create 
and run Processing sketches on the Android Platform. Later | started working on 
Processing Development Environment with Android Mode. One of the things which | like 
the most about Android Mode is its structure. It is interesting to know how various 
submodules (Core, AR, VR, and Mode) combines to form the Android Mode. It fascinated 
me to know more about how the various tasks like generating AndroidMode.jar and 
related Core, AR, and VR libraries are all builds with a single Gradle command. 


| get connected to Aditya Rana (GSoC’20 
Student and GSoC’21 Mentor) who 
introduced me to the project. | often see 
him encouraging me and reviewing my 
contributions to Processing for Android. 


metaGeometry 
Video installations of typographic character Some of the key areas on which | have 
outlines, rotating and scaling around a central 
point. Debuted in the KOBRO Gallery, at the 
Academy of Fine Arts in Lodz, Poland, in 2011. 


worked are - 


e Providing AndroidX support 


Visual and motion design by 
Jan Kubasiewicz; Processing 
code by Scott Murray. 


e Improving permission box UI 
e Website Improvements 

: e Signed AAB Export Support 
Jan would like to thank Scott 
for translating his vision of 


metaGeometry concept into a 
visual experience, through Processing. 


| believe the official processing discourse platform is a great way to learn, share 


knowledge, and improve projects based on user experiences. There will be a scope of 
progress in the project in some of the areas including Java/Gradle Version Update, V2 
Signature Scheme Support for packages and bundles, etc. Ideas like providing 
Multiplatform Kotlin Support for both Android and iOS devices show the broader aspects 
of the Processing for Android. 


Scott would like to thank Jan for introducing 
him to Processing, back in 2007 at the Dynamic 
Media Institute. 


jankuba.com 


scottmurray.org 
- Rupesh Kumar (iamrupesh.me) 
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HO’ OHIWAHIWA I KA MAKOU HAUMANA 0 HAKU JS, PURPLE MAI‘A: 
THOMA, KALIKO‘AULI‘I, JAKE, CARYS, KA‘ENA, A JACOB! 


Haku JS focused on Kanaka architecture and engineering, machine 
learning and virtual reality JavaScript libraries. We also 
explore topology and 3D geometry through hands-on activities. 


Alt-text:A generative architectural “brown print” of a Halau 
Wa‘a, which is a traditional Hawatian structure for storing 
outrigger canoes. 


Purple Mai‘a was founded by Olin Lagon, Donavan Kealoha, and 
Kelsey Amos in 2013. At that time the idea was simple: start a 
nonprofit that teaches Hawaiian kids how to code. But we quickly 
realized that our hopes for our keiki and our ambitions for 
Hawai‘i’s people were much bigger than just coding. We wanted to 
give ‘dpio the skills, mindsets, and malama that they need to 
not only succeed personally but to solve problems for their 
communities in the 21st century. And we wanted to fundamentally 
change the perception that there is anything contradictory or 
unusual about Kanaka Maoli and other people of Hawai‘i being 
excellent in areas like technology and entrepreneurship. 


aan kusakari 

Fe 5 Making generative art with p5.js everyday 

NG a OpenProcessing: https://openprocessing.org/user/224308 
Twitter: @kusakarism 
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MARIANA LEAL - @LIGHTESTHAND ON TWITTER 
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MARIE LEBLANC FLANAGAN // @OMARIECLAIRE 


‘inches © Viral journal Where net P Pandora ini + = \ O)colormode # Bestornoseo Biasozoso pBjsalsch ps 

e ¢ localhost, om * ww = 
Goodbye 

We spent 0 hours, 12 minutes, and 36 seconds together 
Iwatched you learn about the world and tried to 
understand it a little bit better. Thank you for letting me 


come along on this brief journey. 


The last memory of my lifespan took place on’ 


Thank you for beginning my life and also ending it 


Browser Window #240508 


[How might close buttons 
express connection?] 


Elements Resources Network | Sources | Timeline Profiles Audits Console PageSpeed 


pls_testjs 


[How 
might , a ie 
icons 

express 

a bedtime 

ritual?] 


[How might hyperlinks express shyness?] 


Wl 7 il 
Q eering Our Interface examines the inherent 


hetero/gendernormative foundation that our computers, and more specifically, our 
internet's interface is built on. This work serves as both a critique of the 
current human/computer relationship as a manifestation of hetero/gendernomativity 
under capitalism, and also an attempt to reimagine what our relationship with the 
machines we use might look like. Specifically, by reimagining our relationship as 
one of mutual and non-transactional care, these interfaces are inherently 
subverting the prevailing markers of technology, namely efficiency, utility, and 
productivity. How might creating alternative human/computer relationship open up 
possibilities for relationships dynamics in the physical world? 


queerinterface. 


ELENA LEE GOLD (@ELENALEEGOLD) CON 299 614 LAUREN LEE MCCARTHY CON 300 615 
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rect (10,28, height); 
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Digital Weaving, Physical Computing ———, 


( 
While Artist in Residence at the Feminist Center for Creative Work 
(formerly Women’s Center for Creative Work) in Los Angeles in the fall 
of 2019, | created a workshop series in creative coding and electronic ¢ 
textiles. During my residency | reactivated the innate connections 
between weaving and computing by creating and exhibiting weavings, 


video, and conducting workshops that examined the interrelationships 
between technology, craft, and women’s labor. Qianqian Ye, Evelyn 
Masso, Berfin Ataman, and | collaborated in teaching a series of three 
workshops in which students learned to draw and create patterns in 
p5.js, used data sets to create patterns, made small handweavings, 
and then used the computational principles they learned to make their 
weavings interactive with Arduinos. 


Ahree Lee 
www.ahreelee.com 


AHREE LEE/ WWW.AHREELEE.COM CON 301 616 JOEY LEE| HTTPS://JK-LEE.COM CON 302 617 
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Soa ated rated lle New York. If Ihad to predict what, from my life’s work, might still be around ina 
Sota via oee Oe an aeseat Se hundred years, I think it could be my Yellowtail poetic drawing software. 


Code based on circles and fluid dynamics. : a 
If it is, I owe this priv 


like o a pedagogic example 


| piece, we think of it much as a tool with parameters and stages thal can change over lime - 


ilege to Processing, w 


ich has included Yellowtail as 


since its earliest versions. 


Yellowtail is an interactive system for the gestural creation of real-time 


abstract animation. T 
user to simultaneous 


movement. Each line repeats according to i 
a screenspace with toroida 
display of lively, worm-like 
Oskar Fischinger’s film studies; expanded 


Code k 
Dancers 


repeats a user’s marl 
ly specify both a line’s 


s end-over-end, enabling a 
shape as well as its quality of 


s own period, traveling across Above: sketchbook notes (1997) describing 


boundaries, producing an ever-changing Yellowtail. Below: Yellowtail’s animation logic. 
extures. Conceptually, Yellowtail descends from 


rawing tools by John Maeda 


and Scott Snibbe; and audiovisual instruments by Toshio Iwai. 4999999 Ma 0 d ¢ 06 


Conceived in late 1997, Yellowtail became a 


master’s thesis at MM 


performed around the wor 
turned into a game (Blek). 


T, where I gave it to C 


core component of my 
‘asey and Ben. It has been 


d, projected at Peter Gabriel concerts, and 
But most importantly, because of Processing, it 


has been ported to dozens of toolkits, through which it has given so many 


people wordless joy and e 


ucated them about computational visual form. 


Thank you, Casey, Ben, and Processing, for this honor. —Golan Levin 
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re | — <= 1 learned how to program » , 
< ; ‘ = Java. in Processing through 
‘ E this commission - before | 
used to code Linge} in 
ere 


23 23 ‘lam very grateful that: 
: Processing exists. It has 
- been a tremendous help 
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Machine Vision iE Porprsas: 


Workshop at Processing Community Day NYC 2020 


February 8, 


2020, New School University Center, New York 


mltmach 


Daniel Lichtman (dai 
Media Art Students at Baruch College, CUNY 


s13éamail.con) in collaboration with Jose Benitez, Kaitlyn Chiu, Yingna Lu, current New 


In this workshop we will develop an application in Processing that creates machine vision (MV) 
self-portraits, Aimed at beginners, we will explore how a computer ‘sees’ in terms of shapes, 
colors, lines and mathematical calculations. We will play with a variety of MV algorithms (eg. 
face and skin detection, moving-object recognition) and fiddle with parameters (eq. which 
colors constitute ‘skin’? what defines a face?) to generate fascinating and unpredictable 
results. The workshop will cover basic coding in Processing and look at the OpenCV library, 
which provides easy access to many MV tasks, We will provide code templates to help beginners 
dive right in, and help individual participants to get their programs running. To point the 
way towards future conversation about MV’s role in society, we will discuss examples such as 
automated security clearance at Shanghai Airport, smile-to-pay kiosks at KFC and John Deere’s 
‘See and Spray’ MV pesticide applicator. We will address how MV relates to capitalism and 
surveillance, and how it may disempower or empower groups of people--for example how 
immigrants could be targeted by automated forms of police surveillance or how MV could use 
photos on social media to determine your insurance rates. We hope to provide participants with 
a fun and thought provoking introduction to machine vision and creative coding, and to use 
this as a starting point for thinking critically about MV in society. 
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Breaking Wave is an anamorphic kinetic sculpture created by Hypersonic and 
Plebian Design for Biogen-Idec's headquarters in Cambridge, MA in 2014. 


804 suspended spheres move in a wave-like formation. When the wave crests and breaks, the balls hover 
momentarily in a cloud. From almost anywhere in the room, this cloud is purely chaotic, but step into one of two 
hidden spots, and this apparent chaos shows a hidden pattern. From the first, a labyrinth hints at the search for 
knowledge, and from the second, a Fibonacci spiral inspired flower reminds us of the natural order and patterns 
found in nature. 


Because this was for a physical sculpture driven by a motor and a fixed mechanical linkage, we used Processing to 
figure out where these 804 spheres needed to sit in order to form these two hidden images inside the point cloud. 
We designed a Monte Carlo simulation (shown above): The two goal images were set as the top corner images. 
Millions of potential spheres were placed on a hexagonal lattice at different heights. An algorithm determined if 
the sphere placement would contribute positively to the two images or would obfuscate them. If it augmented 
both images it was added to the collection of final points. The script found a solution in minutes. 


For more information see http://bea.st/breaking-wave ©Hypersonic + Plebian Design 2014 
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Processing p5js Processing.py Processing for Android Processing for Pi 


English Espafol fiipehsc étsol feet 


pd.JS 


eventbrite 3 BrowseEvent Orgarizs Hep 
This eventhas ended 
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a1 
Game Design for the Web with p5./s 


by The Code Liberation Foundation 


28 followers 


to generate playful environments. There are many sophisticated game 
engines inthe market, however it can be cumbersome to produce working 
builds to be played by a mass audience. So why not utilize e medium that 
already engages your audience everyday? These workshops aim to give 
you the skills to make games that anyone with an internet browser can 
access! 


p5,js is a new open source javascript library developed by the Processing 
foundation to make coding more accessible for artists, designers and 
educators, We will be using pS. play - « pS.,js library created by Paolo 
Pedercini to work with sprites, simple animation, collisions and basic user 
interaction to develop. game. We will also show youa quick way to get 
your project onto the web. 


Instructors 

=n fa . Aral linctestes eacenenoestestiniearete the diatslendphysicalin 

"RGF! Search p5js.org sate ier eelopiention et eel a an 
SaeR ES Society Museum and by nightis a playful unicorn at NYC Resistor. Working 

. F f elas $0-¢5 with Open Frameworks, Unity, VR and physical computing elements, she 
Fa p5js 27 JavaScript HMRIEENE, HSER EAT ERR has exhibited games at Burning Men, A Maze. Festival, Maker Faire Now 
S rae ons. - a. York, Come Out and Play Festival, end Different Games Conference. 
sa BM UWBSZRR, Ril, ABR. DASUREIRH Having lied in Singapore, Malaysia and Australia, she sees the world 
an A! pSis ETRARARW RAR ABTS PA A aimee BB cibeenaadnianiiaail sea 
died Ende Sake Rachél Bazelsis is a front-end web developer and indie game designer. 
., RARARATS DRM. au aoe Shois a programmer focused on intertwining interactive experiences with 
=f FAs os responsive and efficient design, She aims to design games with the 
aoe P5is PASE MHS—SICR NIKE. PRILZI, tA a Reese capacity to tell stars through gameplay that continue to push 
‘ = \ uw > Pw boundaries of how we perceive the capabilities of the medium, Aside from 
5 SRISHREEA, SIM CE MRE SeHew, Ap haa Dead building all the things, Ral abate porte arbors Healing Gents 
48S HTMLS FRI. BANE, WR, RARE. Addo calerda Renae ea a ae ee peers 
Teach 
Join the p5.js Discord! ) Location 
Hl NYU-Poly MAGNET (8th Floor) 
2 Motrotech Center Tags 
{EAH pS Seth se PIA BIE! Room 817 
New York, NY11201 
Sia View Map United States Events New York Events Things to doin New York, NY 


2) Description 


Now YorkCiassor Now York Other Classos 
Bae pamc3 Do youidentify as a woman and have an interest in making gamesthatare 


RRR SATSIBRESISA, ACHMDREAEBHAB, CEBU. AP playable actoss web-cepable devices? If 30, Code Liberation invites youto 


attend our HTMLS & JavaSoript Game Development workshops using the 


veh Be. SR. BR SB AVN. AEN. MMR, RAL, HE. RK Te navn ate ear es 
crus 4, BOAWLAR, Ei, AES MRUELER, ELT HERS 
wwe AB@ASRWORIE, REED LURE 5 LENSER 
netagam | TRRMSMSS st, BATRNT MRR RARE . BA] 
ae BEETS. 


p5,js Processing FSA MMANIEE. BN ea hist a 
Processing Foundation FSZ#F. 


TRESTLE. 

NT 

48H pS js Editor BIPM S—MAR. ATRESAT AEA 
p5js FE RASMURBSS I TRARSSR, 


Bx 

BAVA SAA LATA pS js: 

° DEA FNMB | 

° Fi p5js XS. 

 BDTRE. 

“Rat. 

ps js EARUEH Qiangian Ye #11 Geter ee AOR Lauren We McCarthy Ie Processing 


Foundation f] NYU ITP. MSC FRR APLAR. BRR FAIRIt Jerel Johnson. © 
Info, 
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ADELLE LIN, @ADELLELIN 


is Truniger 


Dear Processing , It has taken ages for me to move from just an avid fan to 
a practicioner, to a teacher and now a proselytizer of your ways. As a tool 
and as a community you have changed my life, my aspirations and my ways 
of thinking. Life and all of art-making now seem full of variables, and 
loops, and conditionals, and arrays. | still struggle to think in terms of 
objects but | bet it will happen one day. Lately | keep coming back to waves 
and mapping. | learned to iterate, to pay attention and really stick with 
practicing because of you. My indie music heroes have been joined by 
coders thanks to you. I’m so glad that you are now inspiring and producing 
zines and catalogs. Long may your freak flag fly. 


Justin Lincoln 
fyprocessing.tumblr.com 
https://www.instagram.com/thebuildingisacamera 
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 p5.js 2020 
Showcase 


showcase.p5js.org 
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A JOURNEY 
WITH PROCESSING 
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Good Vibrations & B-side 


Aluan Wang _https://artblocks.io/project/140 
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Zero Noon is a digital clock that shows the cu: 


by internet-refreshed statistics. Programmed in Processing, this s 

a. rate and colo 
palette. For example, the clock can tell the time based on the 
sold by girl scouts, or the number of animal species that be 


different reference systems, each with its own ti 


or simply let the artwork cycle them at a pace they like. 


www.lozano-hemmer.com/zero_noon.php 


RAFAEL LOZANO-HEMMER, ANTIMODULAR.COM 
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C 0 @ eatme.kristinlucas.studio 


a ll Anas 


Eat Me, Kristin Lucas. Built with p5.js. 


Eat Me was commissioned as part of the ENTER program by the Onassis Foundation. 
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FRANKLIN 


HOMAGE TO B. 


2013, Madrid/ Spain 
LUMEN Collective (Nacho Cossio + Fernanda Ramos) 
Made with Processing 


In 1761, fascinated by glass harps, Benjamin Franklin invented the glass harmon- 
ica, an instrument which despite having attracted the attention of big names 
like Mozart, Strauss, Beethoven, Donizetti and Goethe, was misunderstood and 
doomed to oblivion. 


Homage to B. Franklin is an interactive sound installation. Like Franklin, we 
also got inspired by the glass harps, so popular in the eighteenth century and 
still enjoyed nowadays. With this reference in mind, we aim to propose a di 
logue between the past, exploring sonority from elements of everyday life -like 
simple crystal glasses filled with water- and the present, using electronic syn- 
thesizers and tangible digital interfaces to generate music. In both cases 

there is something magical about being able to generate music without necessari- 
ly being an instrumentalist, without making use of classical or conventional in- 
struments. In both, the resulting sound is different from what these instruments 
can generate, but still music. 


New sound patterns can be defined by moving the bare hands over the glasses. 
Stimulating the senses, new creative possibilities emerge through the individual 
experience of each viewer. In that game generated by the representation of some- 
thing so old, we propose a reinterpretation and a homage to Franklin and his 
harmonica. 


//This project was first exhibited at FILE/ SP 2013 and it is included in Highlike Book, a se- 
lection of 2613 most liked artworks, published in Brazil by SESI-SP Editorial (2014) 
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Un encuentro donde artistas visuales, programadores, 
musicos y poetas presentan procesos y trabajos creativos 
basados en codigo. 


Charlas Microconciertos 

Marcos Wasem (Montevideo) Juanita Fernandez. Al Térico. 

Rosana Garcia Collares (Montevideo) Marcos Giménez. Instrumentos Prototipicos 

Cristian Reynaga (Buenos Aires) Pati Horowitz. Phoro Live 

Laura Bardier (Montevideo / Nueva York) Marcos Umpiérrez y Danie! Argente. Esto no es Magritte 
Daniel Argente (Montevideo) Brian Mackern. Soundcode Sketches 1998-2000 
Agustin Ramos Anzorena (Buenos Aires) Virginia Arigon. Transpiro 

y Mario Alberto Guzman Cerdio (México) Pol Villasuso & Mathias Chumino. Attractor - Repeller 


Luisa Pereira (Montevideo / Nueva York) 
Alvaro Cassinelli (Montevideo / Hong Kong) 


Fey Montevideo 


Culture 
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| discovered Processing by chance in 2009 during an optional course in design 
school. This encounter opened me to a world of infinite possibilities and quickly 
changed my life like no other software. | owe P5 countless hours of learning and 
experimentation, my passion for generative art, my career as a creative coder, 
teacher and artist, as well as many friendships within an incredible community of 
passionate individuals helping each other. 


Long live P5! 


Lionel Radisson | @Makio135 
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Sketches 


New sketch 


skete 


[SHAPING YOURSELF ON SCREEN] pad 32616 Nov 18, 2020, 


PoseNet x p5,js 


Maya's MOOD RING 


[MAYA] Simulate: SoftBody 


MANIFEST YOUR 
DREAMS ON SCREEN! 


#SupportPS Artist: Maya Man 
o= 


0000: 


Maya Man 


can | go where you go? 


simply watch as the software perf 


MAYA MAN, MAYAONTHEINTER.NET 


PM 4:16:44 PM 
Sep 24, Sep 24, 
2020, 7:20:31 2020, 

AM 8:04:00 AM 


Sep 23, 
2020, 
6:08:35 PM 
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MARCELA MANCINO // GITHUB: MARDEFRONTEIRA 


CON 328 
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Happy 20th Birthday, Processing! 


Thank you for building such a great software. 
Enabling us to learn, share and have fun within a great community. 


William Mapan (@williamapan) 


WILLIAM MAPAN — GENERATIVE ARTIST CON 331 646 GUS MARCOS CON 332 647 


mySketch Bag =6Sketch Files Editor 


function setup() { 
createCanvas(2019, 2021); 
background(34); 

i 


function draw() { 


#heprocessingEO HA \VlS201 84 TF, 
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Showcase S| 


LAL, RRERISFEM ACLS I-KE SAAT 
EORFER TIF OU | JERSE AFICIO FIC HRS 
EBoTLEWELE, 

2019553 A GB, MS TI—-K CHEHHEELL, 
TEXICBIDSCEOAWBIE AIC EEBAANELL, 


HEASHHITSLIICAOTWISELE. Loop Protection 
ISH ROALD?) 


infinite loops that may freez: 


Libraries 
processingl44#h(Cto TH SICHLIID BT, 
THA, [4B APZEWRSKACHSIENIOLR REE TSNELK. 
SHUSAEICHWT, ABICAMACE TUR. 


ELTHIVED, [BAMBI OEDEAICRESICNSTEMMRSLIICHVELK. 
PMOSLETHHI OLS, BAY ECLEM, BA Twitter (@marie_usako) [C##HLELZE 
SHEERS MO LUR SMRCES CUAELZE, 

EOA, [EBWAILISE CNY BHC, MUCK ETERS DAFA OIE IEWSTES BUVL 
HEB RCEH<KKIICAY, SHHTwitterlATSLICAVELK. 

processing (#ZULb6¥A, Op) dpicture diary (#VULEeA Die Fiat) d, 
LFCSAUUINE, ANLHRPDACADORERGS EM MRSLSIICVUELL. 
E4ulsthlceoT, CoTHFOWCETS 
Z2ERDSOH, AHACREBSLANTRYD 


v. 


BAIMVELEM, 20AMFEH TESOL WIET, 
ELT, EICPEAN TASKER RE<SNSAR, BAICHUBLITE WET. 
CNMSbLALSEAUBLET. 
marie. 
2021.9.30 
https://twitter.com/marie_usako 
https://openprocessing.org/user/152145 
} to add custom libraries, private 
sketches, and more! 
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an axidraw interface 
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Hi EX way Processing 17 years ago. 
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@MATHMAKESART 
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KYLE MCDONALD @KCIMC 
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I began my creative coding journey in 
an art class over a decade ago. As an 
engineering student, I had come to view 
software as a tool to solve problems that 
mattered to me. But I had yet to make 
the connection between code and its 
limitless opportunities for self 
expression. Thank you, Gail, for 
showing me the light (and how to 


control it). 


Cut to the present tense and I find myself in the unsettling position of 
doing what I love most each day: figuring out how to teach kids 
mathematics in a way that speaks to their hearts. The image above, a riff 
on Piet Mondrian’s “Composition II’, comes from an exercise wherein 
students abstract and abstraction with linear inequalities. 


p5.js is the primary vehicle my students use to express their ideas visually 
and debug their own thinking. It’s not overselling it to say that I’ve built my 
career on everybody's favorite software sketchbook, and I’m grateful to the 


Processing Community for all of the help and inspiration they’ve given me 
along the way. Thanks y’all! 


With love, 


NICK MCINTYRE CON 341 656 


Game of Life Pong 


grid Size =O Choose a present: 


Made with p5.js 
joemckaystudio.com/gameoflifepong/ 
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CHANDLER MCWILLIAMS 


How it started : jesalmehta.com 
2018. Curiosity and Nature of Code. https: //linktr.ee/jesmehta 
It’s been a slippery slope since, 


How it’s going : 

2021.1 am confident enough to call myself a New 
Media Artist. I teach Creative Coding at a Design 
School. 


Exploring new areas within Math, Typography, 
Motion, Interaction., 

Was rare mae fase 
What havea 


a thowsand sry, 
Flavouring it with my interests in poetry, photography, And Pwd 
food and history. 


Bringing it back to the physical world using 
asercutting, 3D printing, AR.. 


tas lepiens lowers 


am Jesal Mehta and working with Processing has of (Timm 9 
changed my life. 
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Processing Paint soft— 


atiietty, 


Coding * Illustration 


Bl L 7 CHES OILAMEI ECT, TET-LEBETT, 
I-FRBEKLY, CEMBPREHIODEPHE TE EMA CES, 
BoDSELK, MABPSTLCLELE, 

Drawing pictures is important to me. 

I love Game, And Game graphics. 

I want to write code using math. 

I want to draw pictures with a brush. 

I come up with the idea of “mixing”! 


Books object 
P3D,box(),color[] 


JEROME MERCIER - PIZZA-PUNK.COM CON 347 X!) — @FNXZXNWCP6IZLUN CON 348 


____ currently 
experiencing _ 
pandemic time 


this piece is an experimental clock. 


the screen flickers, bathing the 
expressionless face of a figure in light, 
and the digital clock at the bottom right 
is barely decipherable. the figure’s hair 
grows, second by second. 


2020 was the year that conventional, 
standardized time was exposed as 

an ever-present, arbitrary regulator. 
fluctuations in the body, self, and 
nature become re-centered as the loci 
of time. 


this p5.js-generated image shows the 
passage of time through consistent 
changes in hair growth, light, and 
clock digits, functioning as a reflection 
upon grief and artifice during and after 
the global COVID-19 pandemic. 


/ @thedigitalguin) programmed this 
timekeeper while at the parsons 
school of design (mfa in design + 
technology). 


aa guinevere mesh (thedigitalguin.com 


ms = @; //millis 
5 // sec 
// min 
// hours 


WONAORWH 


un 1 setup() { 
createCanvas(400, 400); 
background("#3F 4152"); 
ang1leMode (DEGREES) ; 
frameRate(10); 


to view the code, visit: 
https://editor.p5js.org/quinmesh/ 
sketches/BEhjcFzXz 
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SANDRO MICCOLI CON 3651 ANDREA MISURACA/ @INSTAMISU CON 352 


Congratulations Processing on your 20" Anniversary! 


Many Thanks to the Processing Community and leaders, especially Ben Fry and Casey Reas 
for starting it all! 


Processing is a very helpful tool for me to explore my interests in photography and the Arts. | 
have been using Processing since 2010 starting with version 2. The many improvements over 
the years have certainly helped expand the range of projects where | could apply Processing. 


| really enjoy writing code and Processing helps me satisfy my craving. | started coding in 
1963 beginning with FORTRAN using punched card input. Thankfully we are much more 
productive today with the many tools we have like Processing. It helps that we can write code 
in Processing that runs on multiple hardware and software platforms for building or 
developing our artistic expressions. 


Andy Modla 
Software Engineer and 2D/3D Photographer 


Github: @ajavamind 


Here is a link to a Github page where | have links to my public Processing projects. 
https://github.com/ajavamind/ProcessingSketches 


These are my blogs links that have some postings related to Processing: 
https://andymodla3dvr.blogspot.com/ 
https://andymodlaphotography.blogspot.com/ 
https://rcastudio2videogame.blogspot.com/ 


My Instagram accounts for photo and video: 
Instagram: @andy_modla_photography @tekla3d 


Twitter @andymodla 

Here is a link to a YouTube video | made from frames generated with a Processing sketch. 
The frames were combined with a video editor and titles plus sound added. 

My video and Processing code were inspired by the shredded performance artwork by the 
artist Banksy. His art “Girl with Balloon” was renamed “Love is in the Bin”. See article “Bansky 
Shredded Artwork Is Sold”, The Wall Street Journal, October 15, 2021, Page B6. 


My shredded “Yellow Day Lily Flower” photo is now named “Buy Real Flowers For Me”. 


Shred Photo Art https://youtu.be/zT58Xq-Sijjl 


Shred Photo Art 3D in Anaglyph Stereo https://youtu.be/eS2jV-pJ1VI 
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When I first discovered Processing in the autumn of 2007, I had no idea what a profound impact it 
would have on my career, my creative practice, indeed my life in general. 


I've always loved mixing graphic design and coding. At first on my Amiga 500 at home in my 
teenage bedroom in the 1990s. Then as an apprentice in the design department of a printing 
company. Around the tum of the millennium 1 worked as a "New Media Designer" at an advertising 
agency, uploading table-based "business card" websites via crackling 56K modems and producing 
CD-ROM kiosks with Flash and Director. 


In 2007 I was hired as a teacher in the Interactive Design Program at The Danish School of Media 
and Journalism (DMJX). It was here that I first encountered Processing. At that time it was a piece 
of beta software in revision 0135. It was love at first sight. Just working with a development 
environment where programs were called "sketches" and stored in a "sketchbook" was an indicati- 
on that Processing was made BY designers FOR designers. | felt at home right away. A testament to 
my running love affair with Processing is my current sketchbook, which at the time of writing 
counts over 5000 sketches. 


It didn't take long for me to put Processing on the curriculum. Selfishly because it was of interest to 
me, but primarily because the scholars of the day were stressing the need for programming and 
computational thinking to make its way into design education. I agreed. I thought it was 
narrow-minded to only teach students to be USERS of commercial software. | also wanted my 
students to become MAKERS of their own tools. To that end, Processing, with its low learning 
threshold and rapid iteration around the production of a visual output, was a perfect tool. And my 
students loved it from day one. So didTas a teacher. That split second when I can see that a student 
has grasped the idea of mixing design and programming, and suddenly sees their world of creative 
possibilities explode in a "big bang", is the moment] live for. 


Since 2008, I have taught "Creative Coding" courses to about 700 students at various Danish design 
schools, and even more students abroad - both through physical workshops and remote teaching. 
Many of my students are now graduates and employed by many different Danish and internatio- 
nal design agencies. The knowledge Processing has given them about how code can be used as a 
creative medium is now being applied in the design products my students create and which flow 
out into society. And 1 am genuinely happy about that. 


Processing and ps have also introduced a lot of pleasant people into my life. Over the years, I've 
traveled the world giving presentations about Processing and ps at countless conferences, works- 
hops, meetups, and Processing Community Days. Through this, I've met a lot of amazingly talented 
and pleasant people, all of whom share my passion for code and design. The vast international 
network and friendships I've made with Processing as a pivot point is a huge gift that keeps on 
giving day after day. 


Thave even been fortunate enough to have the opportunity to incorporate and apply my teaching 
experiences with Processing and ps in both my Master's thesis, and subsequently also in my PhD. 
In my current job as Senior Associate Professor at DMJX, with creative code as my research area, I 
see it as my primary task to contribute to programming being embedded even more into the 
curriculum at design schools. Initially with an enthusiasm for the creative potential of program- 
ming, but subsequently - and just as importantly - also with a critical stance on the ethical, moral 
and societal impacts and consequences that are inevitably a by-product of software. 


The brief on contributions to this Processing Community Catalog read, "What does being a part of 
the Processing community mean to you?" My answer is: "Gratitude". Gratitude that Ben Fry and 
Casey Reas, all Processing contributors, allthe people their work stands on the shoulders of, and the 
entire community have enriched the world with a piece of open source software that empowers 
creative people to effortlessly express themselves through today s lingua franca: code. 


Forever grateful, 


/Stig 
@Stixan - stigmollerhansen.dk 


STIG MOLLER HANSEN (@STIXAN) 
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Speaking at design conferences about the 
wonders of Processing, 


‘Teaching Processing remotely to students in 
Australia across ten time zones. 


Doing live coding streams for the people in 
the community is something I would love 
to devote more of my time to do, 


Processing Community Day CPH 


Three years in row I've co-organized 
Processing Community Day Copenhagen. 


<mezim 


‘A gem in my library of coding books: 
"Getting Started with Processing" with a 
personal greeting from Casey and Ben. 


Once I succeded in convincing a design 
magazine to devote an entire issue to the 
theme "Design <3 Code” 


Resprayed my bike and gave ita set of "void 
setup()(}" and "void draw0{}" decals, 
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AARON MONTOYA-MORAGA 


flag in upper and lower halves 


line(@, (1/2)*height, width, 
(1/2)*height); 
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// vertical line, divides upper 


half in ratio 1:2 


h, @, 


line((1/3)*wid 
(1/3)«width, (1/2)*height); 
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push(); 


translate((1/2)*(1/3)*width, 
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= angleCurrent + 


angleCurrent 
angleDelta; 
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= angleCurrent % 


angleCurrent 
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VideoLab 


by Eduardo Morais (2013-) 


Smoni tor 


beer Saepect wie) { 


+ tecnitor width, Seon 
} (ssereentype Saspect wide) { 
S$monitor,inage(SFeed, Soonitor 18, Saonttor 1 Seonttor net eht); 
f 
Sonitor image(Sfeed, ¢, ©, faonitor width, $aonitor heights 


peat): 


Sbotfes 
Suffer « 


, Sbuffer wcll, sbutfer 


Sfield 1 $field; 


nt step interlace 
« 


(int iy'~ SFicld'dy; iy < SbutFer eights dy ~ ay - (dytstep)) ( 
$x. ~ shutter [oedyssbutfer widens 


ns 


(ay sy y=) 
‘Foul color(brightoess(Spel)) + 
Sroniter Lise (Gy dy) "monitor ith] — pads 


? 
) 


smonitor. 
Sronitor 


What about using Processing to develop ‘quick and dirty’ educational software? 
I developed an application that teaches and lets students explore concepts of 


digital video technology. Video can be captured from the webcam or loaded 


from a file. My students could then experiment with: 


> Picture aspect ratio; 
> Progressive and interlaced scanning; 


» Luminance, chrominance and subsampling; 


» Color depth. 


The software also included onscreen tutorials for self-learning in the home. 


//github.com/edmorais/VideoLab 


ARDO MORA 


shut fer ) SouFfer width, SouFfer ‘ 
stuffer 
it(pow(2, $mode sealing) * $sanplings|Ssubsampling {0 1; 


t(pow(2, $wode_sealirg)) © Ssanplings|$subsampling]I] 


it 5 = $aode scaling 


Seampling.chroms) ( 


fer ie = bev od 
Cine iy Gay” Shot fer iy iy ay) 


(Sampling_chroma)_( 
Lixsiy’soutter.sicth; 


ese « sbutFen lysdy © shutter 7 
Geomplirg Lum) { 
yu. ¥(SbUFFeR, pie lL xg (Sy Fy) "Sour en. wich); 


Lin jn (Gy 39)'8 


yteotor ext) ( 
(0.299°redtpx) ercen(sx1)°0, 14*blue(pa2)); 
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Se 
f 
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_ Happy 20th, Prog 

~ Happy 20th, P 

». Happy 20th, Proc 
_ Happy 20th, Pro¢ 


- Happy 20th, Processing. 
_ Happy 20th, Processing. 
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| am interested in using Generative techniques to not only create art, but to understand some existing art in an algorithmic 
manner. Sometimes, unexpected resemblances emerge between unlikely processes and systems, which are moments of joyous 
serendipity, and open a door into emulating styles - faux aesthetics - as | like to call it. 


This algorithm uses a piece of music as input, where the spectral modes are mapped onto a system of bodies 
following Newton's law of gravitation, which then paint out a Jackson Pollock inspired shape of splatters and 
trailing lines. Here's Erik Satie's Gymnopedie 1 made into into an abstract painting. 


- Siddhartha Mukherjee 


DECODINGKUNST 


ARDAK MUKANOVA CON 363 678 SIDDHARTHA MUKHERJEE CON 364 679 


In 2019, the Prinsenhof museum in Netherlands, together with the Inovatie group, reached out to 
the Delft University of Technology (TU Delft) for a collaboration. The idea was to give a modern TU Delft 
technology perspective on the classical paintings of Pieter de Hooch (a contemporary of Johannes 
Vermeer), as part of a retrospective exhibition on this Dutch master. Students following the (O) (O} 
"Algorithmic Art with Processing" course at "X" (the TU Delft Culture Center) took this up as a 
project, and came up with many interactive algorithmic art interpretations of the classical paintings, 
several of which became part of the exhibition (selected works below). 


Clockwise: 1.) Triangulation by Roger Willemsen, 2.) Electric Boogaloo by Jesse Nijdam and iG) 
3.) Dot Matrix by Siddhartha Mukherjee (course instructor, Instagram @decodingkunst). DECODINGKUNST 
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2021 

iBR@BeesHeERs 
f Interactive Applications CM287 
} School of Comunications, Dublin City University 


The faces on this page represent each of the students who have taken this 

module, on the BSc in Multimedia at DCU, since it began. The module uses 
D6nal Mulligan Processing to teach coding and concepts for the creation of interactive media. 
@donalmulligan Fittingly, these faces were generated using a Processing 4 sketch, which took 

each student's ID number as a genetic input and created a unique face for each. 


DONAL MULLIGAN, @DONALMULLIGAN CON 366 681 
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JAIME MUNARRIZ 


Making the Thing 
that Makes the Thing 


Recreating classical works in generative art Musings with Code 
& design with p5.js. A workshop conducted at 


musingswithcode.studio/generative-design-workshop 
Processing Community Day, Bangalore 2020. 


Ajith Ranka & Priti Pandurangan 


Vera Molnar 5 Sébastien Truchet 


Untitled 1974 (Squares) Tiling (Triangles) 


cz io] 


CS Smith 
Tiling (Waves) 


Gowskech, 


Vera Molnar 


Des Ordres 1974 (Grid) 


(fos == 


ae Schatter (Gravel), 968 


pts | 
7 Gow doc 


Piet Mondrian 
Mondrian Grid 


ras 7 
L a < S <q. N) 1 
1OPRNT(); 0 aS XN Anni Albers '@) 
SN NS Generative Weave 
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Generative Coats 


These tiny coats where made by using P5.js 
to parametrically generate coat patterns. 
Then Processing was used to generate 
embroidery files with PEmbroider. They 
where then embroidered on an embroidery 
machine, and then cut out and sewn 
together to produce doll sized coats. 
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Generati1vo 


Coral like structure grown 
from the word “generativo” 
using diffusion limited 
aggregation. 3D print. 


nacho cossio, 2015 
@nacho_cossio 


@NACHO_COSSIO 
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#D ASP EP iny ef 
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AP EProcessin~s ——— ——— 2 
“7 = = Se iz 
Ch ~ = Ad 
#2308 Processing (Tsubuyaki-Processing) is a coding challenge that rH Z SS a ee Se — = a 
expresses art with Processing/p5.js code that fits in just one tweet Ht > Be | ares \ 3 
originated by @Hau_kun san. I have been totally into it since I started \ = SS ene \- \ a TN " z 
iin April 2020. \ ( x Yer 3 
N eh S & 
Creating art in the limitation gives me inspiration and joy. aI s xe 2 ais a z 
It is like writing Japanese Haiku by code. Here are some of my works. tH x X ml ft 
If you are interested, please search the hashtag and take a look at —< ¥ 
everyone's works. #2.3@Processing is always waiting for your challenge! SS f 
| ee 
t=0 1 A \ 
draw=_=>{t+ || createCanvas(W=400, W) 
background(0) Ka\s “ ¢ & 
=0 \ I 
j E Yy = 
stroke #230&Processing —_—_— 
T=translate Ht Ky \ 
Rerotate H \ ~ 
P=push 
nsnoise y 
wal/2 
for (i=9;i—; pop (b(ix5+20)))PC)+T( (mCi) aWeS+t) %(W+W)—w, W)} 
b=L=>1>68&(Line(0,0,0,-1),P(T(0,-1))<R(a=n(t/w, L))<PCpop( 4, 
b(L*=n(j++)+.22)))<R(-a) , pop(b(1))) 4 YY S 
Y ec ee 
07:58 - 
t=0 
draw=_={t || createCanvas(W=600, W) 
background(0) 
weWl/2 
noFill (stroke #3.3>SProcessing’) 
s=.05 


for (x=-1; x<1;x+=s) for (y=-1; y<1; y+=s) {quad(... [[x,y], [x+s,y], [x+s,y 
+s], [x,y+s]].flattap(([x, y,d=mag(x, y*2) ,s=t*PI/2, c=noise(cos(d+s), 
sin(d+s))])=[cxx«ll+w, cxyaW+w]))}t+=.01} 


city fl eect cf. city flows 


7157 Ba EEELT 

15 EEE EEEETY 

19 99999999999 B89RB999AR 

197 9999999999998 95993AR 

qT EERE EECEEEEEEEEEE TY 

BBBBBRBBBS8EBB9999999AARARAARAAIISISIIAAARE 

SBBBBRRBBRA9S999 999A AARAAAAARARARAAARARAAE, 

BBBBRRBSS99G9099AAKAAAEREECEEEAAARAANREEEEE 

BUEogaTEOg9 GNA AAAAPEEEEEEEEEEEPEEEEFEEEEEE 

SUSS99 9999 AAAAARAEPEEEECCCCCCCEPEEBEEBECCCC 

S959999RAAARARAREEBECCCCCcccceecececceeccce 

SSSSAAAAAARAAREBEEECCCCcebpcceecececeecc ce 

AARARARRAAREEEEEECCCCCODDDDDDDDDCCCCODDDDDD 

AARABARBAEEEEEEBCCCCCODDDDDDDDDDGODODDDDODD 

ARBARAEEEEEEEBECCCCCODDDDDDODDDDODDODEEEEEE 

BPEPPEPEEEEEEEECCCCODDDDDEEEEEEEEEEEEEEEEEE 

BEBBESEEEGEBEBECCCCODDDEEEEEEEEEEEEEODODOOL 

CCCCCCEEEEFEBEECCCCODDDEEEEEEEEEOOOOUDI1000 

DDDCCCCCEEEEEEECCCCDDDEEEEEEEEOOODD11121114 

EDDDDCCCEEEEEEECCCCDDDEEEEEEEOOONI111¢ee804 

EFEEDDCCCERBEEECCCCDDDEEEEEEODO1112aa¢edaee 

DOEEEDDCCEFEEEECCCODDDEEEEEEDDO1ig¢23339932 

DODDEDDCCEREEREC CCODDEEEEEEOUDI1 22334339933 

AADDEEDDCCEEBEECCCODDEEEEEDODIi see 3a 44H44 33 

TIAMDEDDCCEBEECCCODDEEEEEDDODItee 334 44u44Hs 

TLIDDEEDCCCEBCCCCODDEEEDDDDNI1e833 444u4HAY 

TLTADEEDOCCCCCCCODDEEERODONOI {aaa aMuUSSgyuY 

SA] iitennennnnnnnescenmnnns 12553 3uuuceeecy 

t=0 t=0// #230 8Processing 9 
setup=_=screateCanvas (W=600,) =+{t || createCanvas (W=600,W) draw=_=>{t || createCanvas(W=600,W) 
draw=_=+{background(a) background(f=0,9) background(a) 
stroke("#2s’P#Processing") noStroke(fill’ #23PSProcessing #p5js°) stroke(x=y=w=W/2) 
scale(3.5) for (x=W; x-=120;) for(F%=1, y=W; beginShape(c= circle(x,y,9) 
tes 004 constrain), y-=120; endShape())for(i=4;i—;) for (i=0;itt<w;){r=9xi+9 


for (y=29; y—-;) for (x=43; x-—;) for(i=15;i—;) 
unchar (" Shi Hbie SFE ik EAE BFL AH" [int (noi 
se(x/99+t, y/99+t, t/3)*99%15) ])&1<<is&point 
(iM3+4%x, int (i/3)+6xy)} 


{r=(TAU/Geitt)*(F21:-1)4noise(x, y,) 
vertex (x+e(cos(r)*248,~60, 60), y+c(sin(r)+2 
40, -60,60))}t+=.02} 


https: //ngym. org/tsubuyaki-processing 


2021 @nagayama 


circle(x, y,~(Citt) /10)%10=1715 :2) 
y+svesin(n=int (noise((t+i)/99)#19)*PI/4) #6 
x+scos(n)*6}t++}v 
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Yota Nakamura 


Ohayota @chayoooota 


/» Coding Cirle 
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Twitter: @rampart47309792 
Instagram: @ramnarasimhan1 


2 2 


AST (Minsang Namgoong)/ KAIST Es}7|SClst #4 CON 375 690 RAM NARASIMHAN - GITHUB.COM/RAM-N CON 376 691 


tuc ni 


|Sculpting Words 


SHEFALI NAYAK [GITHUB @SHEFALINAYAK] CON 377 692 RULBEA CON 378 693 
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Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg) http://nervo.us 


\\y 


Xylem 2010 
generative type experiment 


Reaction 2010 
Seed and Reaction Lamps (3D-printed nylon), Reaction Cup (slipcast porcelain) 


Cell Cycle 2009 


Cell Cycle online customizer, Wave and Interstice bangles (3D-printed nylon), Rings (sterling silver) 
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Think how the machine 
would think if it could. 
Read this statement 
twice, memorize it, and 
then start doing it. 

An entirely new world 
will open up for you. 


Paragraphs On Computer Art, 
Past & Present. Frieder Nake. 


Aequilibrium trianguli eT 


Nicolas Lebrun 


INSTA@NEWMIDDLECLASS CON 381 NICOLAS_LEBRUN_@TWITTER.COM 
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HTTPS://TWITTER.COM/NICOLASBAEZ 
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Widianto Nugroho 


Responsive Painting Series 

Multiple prints from a series of generative 
artworks. Each of which can respond to 
desktop mouse, audio from surrounding 
noise, and motion with standalone Kinect 
nsor. 


2009 - 2011. Variable dimension. 


Built with Processing. 


NOTEDE PROCESBNO sore oF procennma NOITE DE PROCESSING |NOITEDE|PRODESSIG)////45) worre DE rnocessne 


bike dtine 


Then | continued to explore and create 
several works, teach in several 
workshops, and exhibit works made by 
Processing in Bandung and Jakarta until 
around 2011. 


| first learned about the idea of making art 
by writing computer program in early 
2000s when | browsed and stumbled 
across the Aesthetic and Computation 
Group (ACG) at the MIT Media Lab led by 
Prof. John Maeda. The group created 


Design By Number (DBN), then, among 
others, continued with Proce55ing led by 
Ben Fry and Casey Reas. 


lam currently on hiatus from creating art 
with Processing, or other related software 
developed with similar ideas. | really hope 


to be back in the near future :-) 


As an art school graduate in Indonesia | 
was interested to learn to code with 
Proce55ing which was still in its alpha 
version at that time. 


Widianto Nugroho 
Bandung, Indonesia 
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acontece no 


HACKER CLUBE 
desde janeiro de 2016. 
Antes disso no clube 
aconteciam atividades 
com Processing como 
‘SKETCHBOOK (2012) e 
‘SINESTESIA SEMANAL 
(2013). 
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com.hamoid.*; 


VideoExport videoExport; 
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ClickCounter = 0; 

NotFill; 

Pacman[] Pacs; 
[] PacFill = 
TransZ = 0; : x 
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BAY AREA AIR QUALITY: INTERACTIVE TIME SERIES VISUALIZATIONS OF AIR QUALITY SENSOR DATA (pS.js + Procedural.gl) ALEX OLWAL www.olwal.com 


KRISTER OLSSON @KRISTOLSSON (TWITTER) CON 389 704 ALEX OLWAL, WWW.OLWAL.COM CON 390 705 
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\/O Braid is an interactive textile cord with embedded sensing and visuals. It senses user's 
proximity, touch, and twist, while embedded fiber optics enable spiraling light feedback. 
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| Out-of-reach Hover { 
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Rotation 


Alex Olwal Jon Moeller Greg Priest-Dorman Thad Starner Ben Carroll olwal.com/iobraid 


Pinch 


Rolling Grab 
| 


We thank the Google ATAP Jacquard team for our collaboration, especially Shiho Fukuhara, Munehiko Sato, and Ivan 
Poupyrev. We thank the Google Wearables team, and Kenneth Albanowski, in particular, for engineering support. We thank 
Mark Zarich for illustrations, Bryan Allen for videography, and Carolyn Priest-Dorman for advice on textile techniques. 
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Dear Processing, 


| created this image using Processing as a motif for Tanabata, a festival in Sendai where | was born and raised. 


My first encounter with Processing was at the university library. 
Among the shelves of art and design books that | often browsed, | found a book about expression through code. 


I was studying mechanical engineering at the time and was tired of the math and physics lectures, 
so | spent most of my time listening to and creating music. 


| thought of mathematics and engineering as completely different from creative activities. 
Processing changed my mind, 


| was so excited when | realized that the field | was studying was connected to creativity, and it changed the rest of my life. 
Now, as an engineer, | can work with many different artists. 


| think that Processing has taught me that creativity exists in any field. 


Congratulations on your 20th anniversary ! 


COMBS. LXKEENAS RAMS CW SHOR CHStLYSEF—TIeProcessingCHEEOCT. 
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Takafumi Oyama, from Japan 
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Women in Sound Presents 


“ jdentifyi 
tae 


ah 


Saturdays, _ 
. July 24th & 31st, 
August 7th and 14th 
‘11am - 1pm EST 

Via Zoom 


Sliding scale $95 - $125 
To sign up, visit www.womeninsound.org 
In partnership with the Computer Music Center at Columbia University 


CHRISTIAN OYARZUN ROA 


ZEYNEP OZCAN, @OZEYNA (INSTAGRAM) CON 394 


@P1X3LBOY CON 395 P1XELFOOL CON 396 


Japanese translation project for p5.js website 


The mission of our team is to translate the p5.js website from English to 
Japanese and provide j5.js resources in Japanese through Japansese version of 
p5.js website. 
lam Katsuya Endoh who leads this team. A reason why we have tackled to 
translate p5.js website and contribute to j5.js community from 2017, we had 
learned so much through Processing. 
When | contact with p5.js community that | had translated the website into 
Japanese through GitHub, they graciously agreed to let us get the domain and 
host it. However, | found that it difficult to manage the website by myself. So, | 
have been working on the translation with students from Meisei University since 
September 2021. We've just worked together, however we are good team. 
| have learned many things through Processing, such as coding, art, and how to 
think about to OSS. That's why I'd like to contribute to the community through 
this work. | hope that the students who are work with me will learn a lot from this 
project as well. 
Project lead 
Katsuya Endoh 


p5.Js 
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Japanese Translation Team 

Katsuya Endoh, Kaito Shimizu, Katsumi Masuda, Madoka Abe, 
Miu Kanematsu, Yuma Okamura, Yuta Tamamura, 

Ben Watanabe, Funa Maruyama, Koki Honda, Yu Nitta, 
Makoto Yamamoto, Yuki Nakamura, 

Kota Kikuchi, Takuya Taketomi and Toshitaka Amaoka 


https://p5js.jp/ 
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Dave Pagurek 
Gehryisms, 2021 


Generative geometry made by sweeping lines about Bézier paths. Rendered in the browser via 
p5.js in WebGL mode, with shaders supplying sphere mapped reflections and depth of field blur. 


The p65 library has been a huge step towards making programming feel like sketching for me, and 
the community built around it has been a huge source of inspiration for techniques and visuals. 
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AAMINA PALMER, ARTIST-DESIGNER CON 399 714 PRITI PANDURANGAN. INSTAGRAM: PRITI.PG CON 400 715 


@) Conversation “1 > Commits 1 A Checks @ 


Changes from all commits + File filter» Conversations» Jumptor 3~ 


Greek translation 


{® Arty2 committed on Aug 1, 2014 


Y 239 MINN app/src/processing/app/languages/ POE_el.properties (OQ) 


@ -0,¢ +1,239 @8 


110 +4 | File | Edit | sketch | Library | Tools | Help | 
12 +4 | File | 

menu.file = Apxeio 

menu.file.new = Néo 


menu.File. sketchbook = Ixe5108/Kn 
nenu.file.recent = Neéobaca 
18 + wenu.file.examples = Napabetyyata... 


+ 
15 + menu.file.open = Avowyua... 


19 + menu.file.close = Khetowno 
20 + menu.file.save = Anoorixevon 


21 + menu.file.save_as = ANo@fKEUON UG. -- 

22° + menu.file.export_application = EEayuvA Edapuoviic..- 
23° + menu.file.page_setup = Arauéphuon orAibac 

24 + menu.file.print = Extimuon... 

25 + menu.file. preferences = Npotipioers..- 

26 + menu.file.quit = EEob0s 

og 

28 + | File | Edit | sketch | Livrary | Tools | Help | 
2 +3 | eait | 

38 + menu.edit = Eneteovaoia 

31 + menu.edit.undo = Avaipeon 


3200 + menu.edit.redo = EnavaAnjn 

33° + menu.edit.cut = Anoxont) 

34° + menu.edit.copy = Averypady 

35+ eenu.cdit.copy_as_fitel = Avcuypabi, ws HTAL 

36 © «0+ menu.edit.paste = EnixdAAnon 

37 + menu.edit.select_all = EmAoyf Okuv 

38 «+ menu.edit.auto_format = Autouatn d.audpowon 

39 + menu.edit.comment_uncomment = IxoA1asyd¢/AnooxoAaoysc 
40 + menu.edit.increase_indent = \u2192 AUEnon sooxnc 
410 + menu.edit.decrease_indent = \u219@ Meiwon cooxri¢ 
42° + menu.cdit.find = Avagritnon..+ 

BGM» menasedit.ting next = Avokiionon  ERSuevou 


44° + menu.edit.find_previous = Avatiitnon nponyoopEvou 
45° + menu.edit.use_selection_for_find = Xofion emidovfic via Avazitnon 
a6 + 

47 +2 | File | Edit | Sketch | Library | Tools | Help | 


48 4s | sketch | 
49 4 menu.sketch = Exé510 


50 + menu.sketch.show_sketch_folder = Npofod4 gaxédou tou Exe&iou 


51 + menu.sketch.add_file = NpooOixn apxeiou... 


# | File | Edit | Sketch | Library | Tools | Help | 
oA +e | Livrary | 

55 + menu.library = Eveayuy BBArobixnc. . 

56 + menu-library.add_library = Npoo@iixn BBA108rixns-. - 


57 + menu.library.contributed = Zuverodepépeva 
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58 + menu.library.no_core libraries = auti n Aerroupyia Sev éxer Paorkés BrPhr09/Kes 


59+ 
6@ + | Fite | Eait | sketcn | Liprary | Tools | Help | 

61 +3 | Tools | 

62 + menu.tools = Epvareta 

63 + menu.tools.color_selector = EniAovéac xpupdtuv... 

64 + menu.tools.create_font = Anjnoupyia ypaypacoaripé. .. 

65 + menu.tools.archive_sketch = Apyerodétnon Exe5{ou 

66 + menu.tools.fixthe_serial_lbrary = Biépeuon Eerpransis BLpALoBKNS 
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Evolutionary System to Design Type 


Jéssica Parente, University of Coimbra, CISUC, DEI 
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Happy 20th Birthday, Processing! Thank you for everything you do. 


Devi Parikh 
@deviparikh 
#genartclub 


DEVI PARIKH CON 403 718 


Scan Sequencer Javascript JeongHo Park 
https://jeonghopark.de 


twitter@jeonghopark 
Scan Sequencer Javascript takes a realtime web cam image https://jeonghopark. github. io/ 
and in turn makes real-time music. It works like a scanseqjs/ 
virtual keyboard, the vertical keyboard is recognizing a 
change of the color of pixels and make a trigger signal. https: // 
The circles made by trigger signals move to from left to experiments .withgoogle.com/scan- 
right and when they cross the middle threshold, they sequencer 
play a note. : P 
https://jeonghopark.github.io/ 
It is written based on the p5js and tonejs libraries. scanseqjs/ 


Colors based on 
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Input 
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Motion Synth 
TriggerLine TriggerLine 


Trigger occurred due 
to color change. 
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mindful_code 


mind = "present"; 
NUMBREATHS = 18 


setup() { 
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stills from Wolfscope 


Robin Parmar 
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P5 Turtle Microworld 
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Logo/Turtle Art Simulator in P5 
by Cyberparra 


function start() { 


var k=0; 
for(n=0;n<50;n++){ 
t.forward(20+k); 
t.right(90); 
k=k+5; 
t.left(0.5 
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Video projection, discarded 
cemetery Howers, endoscape’, ® 
and Processing. = ® 


3.20.18, 9:15 AM PST, 2018. 
Collaborative Video Project* 
and Processing. 


Dark Spring VR, 2018. 
Virtual Reality experience, ft. 
“Wake” by RYAT. 


*3.20.18, 9:15 AM PST 
is a collaboration by Parsons and over 
40 media artists from around the Los 


ler 


Darlington, Lee 
Tusman, Michael John Kelly, Natalie 
Sun, Nathaniel Eras, Nina Sarnelle, 
Perer Flaherty, Rachel Bins, Samantha 
Culp, Sarah Zucker, Sharsten Plenge 
Ty Pownall, Victoria Vesna. Video 
taken at the exact moment of the vernal 
equinox was remixed into a collage 
using Processing, 


KATE PARSONS 


As the culmination of a media “ 
arts residency at Coaxial Arts, 
media artist Kate Parsons 
unveiled new video work, a 
virtual reality prototype, and 
floral installations comprised of 
fresh florals and discarded 
cemetery flowers. 


This residency was made 
possible by a grant from, the 
Pasadena Arts Alliance, Coaxial 
Arts Foundation and technical 
support from BLOAT: 


THE DARK 
SPRING 


VIDEO &VR 
INSTALLATION 
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ARTCENTER COLLEGE OF DESIGN STUDENTS CON 409 724 @PATTERNSEEING CON 410 725 
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Creative coding is all about the community. 


So much artistic beauty comes from people who express themselves with code, but 
by connecting, by being open with each other, we create something even more 
meaningful than the artwork. 


We push our craft forward. 

We inspire each other and share research. 

We encourage and lift each other up. 

We critique colors. 

We send pictures of our dogs. 

We share mental health struggles. 

We brainstorm new ideas. 

We repair each other’s quadtrees. 

We deepen our understanding of diversity. 

We share pricing and contract information. 

We learn from each other’s successes and failures. 

We get jealous. 

We celebrate. 

We create beauty. 

We organize meetups. 

We plan tech/art startups. 

We teach new artists old tricks. 

We invite people to explore. 

We debate ways to slow climate change or improve our homes. 
We share screenshots when a Processing hero follows us online. 
We show each other that we are not alone. 

We actively work for inclusivity and tolerance. 

We revere the artists that made this possible for our generation. 
We ask questions about using blendMode() correctly. 

We become friends with like-minded people across the globe. 
We get sneak peeks at art and see projects evolve. 

We explore new printmaking techniques. 

We share code snippets and private repos. 

We give selflessly and debug patiently. 

We create the world we want to live in. 

We establish our place in history. 

We determine our collective future. 

We are creative coders. 

We are a community. 


Aaron Penne 
@aaronpenne 
#genartclub 


Fukushima Offset 

2021, Mou Peijing Melody 

Processing / Python / Physical computing 

Details can be found here: https://www.melodymou.com/fukuoffset 
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Thank you 
Processing 


Thank you Daniel for 
being the teacher I 
never had and the 
inspiration for who I 
wanted to be. 


Thank you Casey and 
Ben for creating the 
tool that allowed me to 
express my creativity. 


Thank you Lauren for 
always being an 
inspiration with all 
your projects. 


Thank you to the entire 
community. I hope I 
have given back at 
least some of what you 
have given me all these 
years. 


FEDERICO PEPE @FEDPEP CON 413 728 PERLINDRAW (PAULO COSTA - NAVAX) CON 414 729 


Generous Art 
Phoenix Perry, 10/2021 


Some journeys start with a hello. | meet Casey 
at his Bitforms show in New York in February of 
2002. His generative art covers the walls. It is 
created in using an open source tool he made 
called Processing. Organic flowing lines spin 
paths of colour that fill the gallery walls. Next to 
the pieces hangs their code - naked, exposed, 
and made vulnerable. His process is laid out for 
anyone to use, improve, or understand. The work 
felt transgressive in its generosity. The altruism 
was contagious. 


This kindness drew me to working with 
Processing. As soon as | have some free time, | 
download it and start coding. Mailing lists 
quickly pop up. | make code experiments and 
indie games. Whenever | start something new, 
Processing constantly forms the initial 
investigation. 


To support the community, | open Devotion 
gallery with computational biologist Marie 
Evelyn, sound artist Margaret Schedel, and 
musicians Brian Jackson and David Last. 
Between 2009 and 2014, we host close to 300 
events and exhibitions. Many of the artists we 
show experiment with Processing. It is obvious 
this is tool shaping a generation of creators. As 
the years move on, | begin to notice a severe 
lack of diversity in the scene. 


At a conference that | present at in 2011, | am 
shocked by the state of affairs in the field. | 
show my interactive machine learning work 
done in collaboration with Dr Rebecca Fiebrink 
and Dr Margaret Scheel. It was the very first 
work of its kind. Many men around me are so 
wholly unable to see me as a peer that they 
mostly ignore me. To make matters worse, | am 
sexually harassed by prominent community 
members. The conference intentionally 
welcomes marginalized creators, but the 
discipline required more than our presence to 
make us safe. It needs our leadership. 


It would be remiss of me not to point out many 
of the key players in this history of Processing, 
and the creative coding community, are in the 
Global North. Also, it is important | acknowledge 
my own whiteness. While | do live with a 


PHOENIX PERRY 


disability, 'm privileged. Would these spaces 
have been as accessible to me otherwise? 


In 2012, | quit my day job in design and move ta 
teach at NYU. | am asked to join by two artists 
whom | know from the Processing Community. 
On my first day at ITP, the NYU receptionist 
leads me to the sewing machines when | say | 
am teaching and need help finding my 
classroom. 


In March of 2013, | take action to bring change. | 
teach out to three women and they are Catt 
Small, Jane Friedhoff, and Nina Freeman. We 
bring Code Liberation to life. We run free queer- 
friendly coding classes only for women and use 
them to build community and solidarity. Around 
90 women show up to learn to code our first 
class. How could there be so much demand and 
so little support? Over the coming years, we 
teach several thousand women and non-binary 
people to code for free. During this period, 
Lauren McCarthy is building p5. Evident to us 
both, there exists an affinity between projects, 
and Code Liberation begins teaching p5. 


By 2015, | leave NYU and am at Goldsmiths in 
London. Code Liberation Foundation 
collaborates with more women, including Saskia 
Freeke, Adelle Lin, Alice Casey, Charlie Ann 
Page, Kiona Niehaus, and Caroline Sinders. 
Saskia delivers a series of p5 classes during 
2017 culminating in an exhibition of 13 games 
at the V&A. This project also generates a set of 
open source teaching materials for pS. 


Starting in late 2018, | transition to UAL. Where | 
work to develop the curriculum for the Creative 
Computing Institute. Interlaced in our work are 
principles of social justice. Given you can get a 
degree in it, is creative coding still radical? How 
do tools like Processing survive when 
Universities that teach with them largely don't 
contribute to their survival? Most of the key 
figures in this community now work within 
academia. Have we beemea*opted? Is there’ 
another way? Theselare open questions. 


What is Processing for me? It has been the yarn 
weaving my creative and professional lives 
together, and without it, I'm not sure this sweater 
would have turned out quite the same. 
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Processing Foundation Fellowship 
Niklas Peters. 201? Fellow 


Developing a creative coding curriculum for 
learners with low computer literacy 


The Processing/p5.js community has generously 
created countless resources for people to teach them- 
selves to code. However, many people face significant 
barriers in accessing these self-directed resources. 
Learners from marginalized groups can lack a baseline 
familiarity with computers, and even if they become 
more comfortable with computers, coding can seem 
cryptic and inaccessible. 


My fellowship aimed to bridge that gap. | designed a 
curriculum for students with low computer literacy, with 
the end goal of having participants make basic programs 
and feel comfortable to continue their coding education 
by accessing free resources on their own. 


In July 2017, | ran a pilot of my curriculum with high school 
students in Johannesburg, South Africa. The first few 
modules covered the basics of using a computer, including 
drawing with different brushes and colors in MS Paint, 
exploring keyboard shortcuts and special characters, and 
navigating files and folders in Windows. 


The most exciting part of the pilot was seeing the students 
create their first sketches in the p5.js web editor. There were 
murmurs of excitement throughout the computer lab as they 
saw their first circles appear on the screen, and found they 
could control a circle’s size and position with tiny 
modifications to the code. As the students learned more 
about colors, variables, and how to make their sketches 
interactive, their excitement about the possibilities of 
creative coding grew. 


| continued to run the program throughout 2017 with other 
after-school groups in Soweto, making adjustments to the 
curriculum as | learned from the students which exercises 
were most useful in mastering the basics. 


The 10-module curriculum is available for use & 
modification: 
https://github.com/nikfm/p5jsCurriculum 


Niklas Peters is an artist.i musician, and organizer 
More info at http://niklaspeters-com 
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Processing is just amazing. 
It's the way I first fully grasped programming. 

It's just so fun to be able to make cool art with text. 

Not to mention the fact that you could make the art so interactive 
to the point it turns into a game. It's just so cool. 


Knowing how to code opened up a lot of possibilities for me 
and I had a lot of fun just messin’ around and making weird shapes. 
It's so awesome that anyone can use Processing 


and have as much fun as I did. 


Thank you Processing :D 


HTTPS://GITHUB.COM/PHOTONNIKKO 
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The beauty of complex functions 


11/2021, 11:30:37 AM 
@jcponcemath 


https://www.dynamicmath.xyz/domain-coloring/ 
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artwork & design by mark webster 
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For me Processing is about the feedback loop, The engrossing 
quality of making changes and seeing their effects. It's how | 
learned to code, it shaped my practice, and the community has 
been there at every step. | started out by copying directly from 
examples created by the community. Then | tried to imitate 
others by trial and error. Finally | shared my own art and code. 
Then we went around again 
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My name is Martin Prout aka monkstone (monkstoneT on twitter). 

In 2008, when Darrel Ince was professor of computing at the Open University (Milton Keynes), 
Darrel created a Mass Writing Project for students and former students, and I was one of them. As 
an enticement and inspiration we all received a copy of Ira Greenbergs Processing book, and were 
encouraged to start a blog (which I have since deleted). By 2009 I was teaching myself ruby, so that 
I could explore ruby-processing. Sometime later Jeremy Ashkenas (whilst on one of his extended 
bike tours) granted me write access to his ruby-processing github project, which I maintained and 
updated for processing-2.0. For processing-3.0 I created JRubyArt, which uses some vanilla 
processing code, but is no longer dependant on a vanilla processing installation, and includes some 
novel extras. I have also made some processing libraries available as rubygems, notably toxiclibs, 
geomerative, wordcram and pbox2d. I have had spells of exploring LSystems in java, ruby and 
python. I have also explored ray-tracing using both sunflower (java) and povray (C++) in 
combination with processing. Here is a povray example using a mesh exported from toxiclibs (run 
from JRubyArt):- 


I have contributed to and answered questions on the processing forums, particulary regarding linux 
and RaspberryPI, where I can offer years of experience. More recently I have been exploring 
OpenSimplex2 as the default noise implementation for my ruby-processing projects. Another area 
of interest for me is contextfreeart (a sort of visual sudoku) , and I have developed a JRubyArt DSL, 
and explored exporting sketches from JRubyArt to render with contextfreeart. I do all of this 
because I can, and it helps me keep my brain active. 


MARTIN PROUT AKA MONKSTONE CON 433 748 


IRIS QU (INSTAGRAM: IRIS_XIAOYU) 


CON 434 


749 


ACHILLEAS RACHOUTIS IG: ACHILLEAS_RACH CON 435 750 DANIEL RAEDEL, PSYD CON 436 791 


MICROMUNDOS AMENAZADOS interacting with p5.js with 
THREATENED MICROWORLDS 


2613, Medialab-Prado afterARCO mal Ar DSFREE 
Madrid/ Spain 


Photography: Fernanda Ramos — 
Creative Coder: Nacho Cossio 
Made with Processing 


Duckface Hunt - Face gestures to shoot ducks Flappy Pose - Flap arms to fly up and down 
The animation was produced with photographies of the inhabitants of the 
Cabanyal neighborhood in Valencia, who face the threat of losing their 
homes. In 2010, when the photographs were made, this district, with 
buildings of the nineteenth century and generations of families living 
there for more than 308 years, could be bulldozed in order to build a 
boulevard across it. 


In this video, exhibited on Medialab-Prado’s digital facade, the por- 
traits turn into a mix of falling faces, representing the unity on 
their fight. Finger painting - Pinch fingers to paint Face Paint - Face gestures to paint on mobile 


CodeMedium - Use face ge 


FERNANDA RAMOS, VISUALARTIST CON 437 OZ RAMOS CON 438 


Algorithmic art showcase 
of Ozy egin University, 
Classes of COD 207/208 
2021 Spring&Summer 
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Gemnam: IID Batch (2012) 


Visualizing the relation between letters 
and representation as an abstract form. 
This project exp 


tween | 


ionship be- 
sented as an 
abstract gem-lik 


The following is the representation of the 
names of the coordinator & 14 students of 
IID (2012 batch) at NID, Bangalore 


99O@ 


JAZ. 


Names Visualized 
Chakradhar Saswade 
Aarushi Mish: N 


Data Visualization Exploration 


n form 


TIEMEN RAPATI/ UNITED VISUAL ARTISTS CON 441 756 


RASAGY / @DATA.N.CODED CON 442 157 


FABIN RASHEED | WWW.NURECAS.COM CON 443 758 @REAS CON 444 759 


my fur coat real 


my fur coat worth anything 


my fur coat mink 


my coat fur 


why is my fur coat shedding 


ANDREAS REFSGAARD CON 445 CHRIS REILLY CON 446 
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@reona396 
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MORITZ RESL, PAUL SOMMERSGUTER 
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vers lle 
TURCUF 


Messages vers le futur was a 
public installation designed for the 
event La Nuit de Chercheurs 2012 
in France. Participants logged into 
their Twitter account and wrote a 
message with the hashtag 
#messagesFutur. The text of the 
message appeared in a large-size 
projection. Each message was 
also represented as a 3D sphere 
that travelled through a wormhole 
and then disappeared in the 
distance. 


The wormhole was indeed a 
hyperbolic mathematical figure 
coded in Processing. Tweets 
however got stored in a Gmail 
account and will be sent back to 
their users this year, later in 2022. 


Concept and development: 
Everardo Reyes 

Thanks to Eleanor Dare & 
Kostas Terzidis for their 
guidance 

Paris, France, 2012 
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rich.gg 


organized PCD Reunion Island 2019 


V7 2228 


Digital Architect, 
Rich started with VRML back in 1998 
and is so thankful for Processing 
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Simply move the dots 


RICH.GG / DIGITALARCHITECT CON 451 766 
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Several objects on their orbit through the Processing.py universe 


This summer term, I taught the topic “vectors” in two ways: first, the mathematics 
of two-dimensional vectors, as usual; second, a short programming course in 
Python, followed by weekly assignments in Processing.py. 


Each of my students at Khevenhiiller Gymnasium (Linz, AT) created their own 
object; had it move across the canvas; added force; learnt about speed and accele- 
ration, and, above all, about vectors. 


In the last assignment, we sent all these objects — aliens, ladybirds, cacti, ted- 
dy bears, and the like — into orbit. There they will continue to float as long as 
Processing’s Python mode works ... thanks to all who keep this universe running! 


Flying objects were created by Elisa Antelmann, Paula Maria Bauer, Mithad Jan 
Bogner, Luisa Mayr, Sina Mayr, Anton Pargfrieder, and Elisabeth Schimana; addi- 
tional code and documentation by Roland Richter. The code is available under a 
GPL licence at https: //github.com/rric/processing-vector 


ROLAND RICHTER CON 453 768 


territories 


RENEE RIDGWAY, RICHARD VIJGEN 
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Processing, we have spent many hours in the same room.. 
We've argued, wrestled, and laughed together. 


te(width/2, height/2); 


142,-182,361,182,361); 
(CORNER) ; 


Processing_for_iOS 


Happy Birthday 
Processing! 


- pary suy 


106® 


Processing for iOS. 
Made by Frederik Riedel. | 
https: firiedel. wif 


qnppynuaby / || 


Download on the 


MAY IT NEVER STOP! Happy 20th Birthday! c App Store | 


CHRIS RIED / TWITTER: @GENERATECOLL CON 455 770 FREDERIK RIEDEL, HTTPS://RIEDEL.WTF CON 456 


Robot And Proud 


Logika / Panna 

10” Vinyl 

Cover art made in Processing 
Record Store Day Japan 2018 


“ANAMIKA’ - RISHI (@DENISOVICHPY) @ROBOTANDPROUD CON 458 
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COMMUNITY 
DAY 2021 


PROCESSING 


Celebrating 20 years 
of Processing with talks 
and contributions by 


Patrik Hlibner 
Vera van de Seyp 
Dr. Martin Lorenz 


all talks are now online! Casey Reas 
timrodenbroeker.de/pcd2021 Sander Sturing 
TIM RODENBROKER, TIMRODENBROEKER.DE CON 460 
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Crona: 
early sketches 
Nikita Rokotyan, 2010 
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NIKITA ROKOTYAN CON 461 ANGELA RONG, HTTPS://GITHUB.COM/TOGEKISSE CON 462 


H. SCOTT ROTH, TWITTER: HSCOTTROTH 


LIGHT SUGGESTIONS // 4 + 5 (B/W) 
1300X1300, GIF, MINTED ON: HIC ET NUNC 
PROCESSING, PHOTOSHOP 


H. SCOTT ROTH 


ON'GOING SERIES W/ SGT. SLAUGTHERMELON'S 
PROCESSING SCRIPT. TITLED “CHAOS RENDERS" 


CON 463 


A. ROTHAUG 


CON 464 


1583483746819 


REBECCA RUIGE XU, SEAN ZHAI LUCREZIA RUSSO / IG: @LUCREZIARUSSO CON 466 


/ 


Thanks to the Processing Foundation, 20 years of 
enabling creative coding and generative art ! 


RVig - @rvig_art 


NDBIRD (2008) BY RUX (RUI PEREIRA) CON 467 RVIG, GENERATIVE ARTIST, @RVIG_ART CON 468 
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Processing turned 20, Hooray! 


This means you need to eata 
lot of cake. 


Tom-Lucas Sager 


? Scan the QR-Code and 
enjoy a delicious piece of dig- 
ital cake, but avoid those bad 
veggies! 


a 0 
eI | Made with p5.js and ml5.js by 
ea, Tom-Lucas Sager, Creative 
En: Technologist from Hamburg and 
proud member of the Processing 
Community. 


Ge 


Instagram: @tlsaeger 


Web: tlsaeger.de 


https:/bit.ly/Processing_Cake 
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ASHNA SAHIR 
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SANTINO SANTOS 


CON 471 


@SARAH_RIDGLEY 
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Processing makes you a magician. 

Anyone can create magical moments in this 

digital world. It reminded me one of artistic trends 
called Magical Realism, where fantastical elements 
are considered as something normal in 


the real world. When I explore Twitter 

where I condier it is a real world, I 

saw magical art works created by Processing. 
Just like magic, there are small tricks 

to make it happen. If you know a bit of 

coding, you can be a magician immediately. 


Also, if you master the rules of Processing, only 
your creativity is the limit. Since I happend to 
know this community, I have met a lot of 
illusionists. It has been hour to 

be part of this community 

and have fun at 

making magics. 

What does being 

a part of the Processing 

community mean 

to me? Processing 

gives me a place 

to be myself and 

makes me feel that 

I can decide what 

Ido 


TAKAYUKI SATO (@TAKAYUKISATO624) CON 474 789 


float edge = 120; 
float d = sqrt(edge+edge+2) ; 
float d2 = d/2; 
float rot = 0; 


void setup() { 
size(2250, 3000); 
smooth(8) ; 
Fi11(0, 40)5 
noStroke()5 

+ 


void draw() { 

background(255); 

float x1 = cos(rot) * 2; 

float yl = sin(rot) * d2; 

float x2, y2, rz 

for (float x=0; x<=width +d; x \#= d) £ 

for (float y=0; y<=heighttd; y = d) { 

r= xxrot/12090; 
x1= cos(r) * d2 ; 
yl = sin(r) * d25 
beginShape(); 
vertex(x + x1, y # yl)s 
vertex(x = yl, y + x1); 
vertex(x - x1,“y - y1)} 
vertex(x + yl, y-xL); 
endShape (CLOSE) ; 
x2 = x + 2; 
y2 = y + d2; 
beginShape()5 
vertex(x2 + x1, y2 + y1)3 
vertex(x2 - yl, y2 + x1); 
vertex(x2 - x1, y2 ~ yl); 
vertex(x2 + yly y2 - x1); 
endShape (CLOSE) ; 


LASSE SCHERFFIG CON 475 790 MARK SCHIFFERLI CON 476 791 
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ANDREAS SCHLEGEL @SOJAMO, CONTROLP5 CON 477 792 ANDREAS SCHLEGEL AND BRIAN O'REILLY CON 478 793 


‘= jupyter py5 notebook 
File Edit View Insert Cell Kernel Widgets Help 
+ xs & BH & + PR BC DP Markdown 
Welcome to py5! 
py5 is a new version of Processing for Python 3.8+ 


The goal of py5 is to create a version of Processing that is integrated into the Python ecosystem. 
Built into the library are thoughtful choices about how to best get py5 to work with other well known 


Python libraries and tools. This includes two custom Jupyter Notebook kernels, one of which was 
used to create the notebook you are reading right now. 
import numpy as np 
Creative coders can build a pyS Sketch by writing setup() and draw() functions. 
def setup(): 
size(600, 150, P2D) 
background(64) 
text_size(50) 
draw(): 
# load numpy pixel array 
load_np_pixels() 
# create a gradient using numpy, assign to numpy pixel array 
np_pixels[25:125, :, 1:4] = np.linspace(9, 255, num=width)[:, None] 


JIM SCHMITZ CON 479 794 JOHANNA SCHNEIDER CON 480 795 


update np pixels() 

# oscillate the fill color between black and white 
fill((1 + sin(frame_count / 100)) * 127) 

# draw text to the screen 

text("this is py5!', 190, 90) 


At its core, py5 is using the Processing Jar files to provide its functionality. It uses the Python 
library JPype as a bridge to connect CPython to the Java Virtual Machine. 


run_sketch() 


The Sketch appears in its own window. A screenshot can be embedded in this notebook. 


In [5]: py5_tools.screenshot() 
Out[5]: 


There is much more to learn about py5. Go to https://py5.ixora.io/ to get started! 


Questions? Comments? Reach out on Twitter at @py5coding or use the hashtag #py5 
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*™ Get Started 


bubbleso2a dis Editor 


1 A 2 E (0) ( p 5 j s) 1 . 3 : Lip Soitise: DoS page walks yo Gnas fatter: a p5.js project and HEHE your 


first sketch. The easiest way to start is using the p5.js editor, you can open 


by upgrading access 


Donate 


the web editor and can scroll down to Your First Sketch. If you would like 


ERIC SOCOLOFSKY (@ERICSOCO) CON 483 798 CHRIS SEARS CON 484 799 


HTTPS://PHIL-SEATON.COM/ 
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SENBAKU 


Hello. My name is Senbaku. 


I live in Japan. I was a housewife 
raising my child, but on Christmas Day 
2019, I met Processing, was made magic, 
and became a creative coder. 


- I'm not aiming to write every day, but 
I enjoy writing code daily. I'm tweeting 
about it on Twitter. 

(https: //twitter.com/senbaku) 


- I used to draw illustrations using acrylic 
gouache and Illustrator as a hobby, and now 
I use code to draw those pictures. I enjoy 

expanding the range of things I can draw by 
incorporating math and science into my work. 


- I wanted to contribute to the community, 
so I created a page to introduce books rec- 
ommended by members of the creative coding 
community in Japan. 
(https://senbaku.github.jo/) 

If you have any book recommendations, 
please let me know. 


CON 486 


My First Experience with Creative Coding. 


Hello Legends! This is my experience with Creative Coding. If you are driven by coding 
and art then this is a perfect read for you. 


I'm Sudhanshu Mukherjee and have done my engineering in computer science. I'm a 
Freelance Data Scientist and when I'm free | love reading about New Technologies, 
Creative art generation, Blockchain Tech, Cryptocurrencies and niche technologies 
which make their way in Tech. 


| never knew something called Creative Coding Art exists in this universe. | came 
across a workshop which was about generating music and visuals using code. To be 
honest | was scared coz | didn't have any idea about it. Keep everything aside | decided 
to go for it. The workshop was the most remarkable thing happened to me. It opened a 
different universe for me and it was so elegant that | spent next few days digging more 
about it. | was amazed that there exist a complete community who create and shares art 
with everyone. | really loved how everyone was so involved sharing each others’ art and 
applauding every small thing which was created within community. 


| think in my opinion we have so much more to grow this in this everyday growing 
technology. | want every developer to be familiar with the applications of p5.js. I'm 
grateful to Processing Community and p5.js for relentlessly working towards for 
educating more and more enthusiasts to ignite interests of everyone. 


| also feel there's so much more to explore for me in this and it would take millions of 
baby steps to reach there. My heart is filled with so much of confidence writing this. I'm 
very sure there will be a day where creative coding is pursued as a hobby and every kid 
would spend hours doing it. 


Sudhanshu Mukherjee 
Data Scientist 

Instagram - @senseiwhocodes 

Github - sudhanshumukherjeexx 

Linkedin - www.linkedin.com/sudhanshu-mukherjee 


INSTAGRAM - @SENSEIWHOCODES CON 487 802 


JAMES JUNG-HOON SEO (@LOSSLESS) 
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COEVO 


A 2D physically-based environment with artificial 
agents that create 2D solutions for given problems 


“Create an object that moves through an inclined plane” 


nc Oe mn 


Made by @gerard_sgs 


GERARD SERRA CON 489 804 


AYUSH SHARMA, ENGINEER 
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@ File Edit View Special 


Yining’s Processing Disk 


167K available Yining’s 
Processi... 


5 .playground 4 
Bo -peaug p5-ble-js Machine Learning 


for the web 
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pS web editor m5.js 
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Another You 


Artificial Companion 


Another You is an artificial companion which represents another you. ‘It’ is the negative side of you, another 
version of you. It is depressed, sad, and passive. Based on the expressions on your face, it will automati- 
cally generate an avatar looks like yourself and have conversations with you. 


It chats(in text & sound) with you and provides negative thoughts to you. This another you also has the 
power to decide when to end the conversation and when to start. It can recognize some of your facial ex- 
pressions or gestures and give some suggestions. 


It is not a controllable ‘pet’ that you can in charge of. And it is also not a happy companion. 
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Another You 


YUJING SHI 


Another You 


who's ther 
I'm another you. Nice to meet you! 
What's your name? 
yujin’ 
Hi, Yujing. How old are you? 
2 
My birthday is May 5 2020. Greeting 
again :-p 
nice to meet yo 
How do you do today? Please state 
your problem. 
i want a stor 
I'll tell you a story 
go ahea 
“Alone and lost, she became strong," 


Another You 
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Unisex Face Generator Munus Shih (2021) 


| personally love to draw faces, and this is my first 
attempt to transform my drawing into a random 
generator. This piece of work is B&VV because | 
wanted the viewers to notice that squiggly, 
hand-drawn style in my lines using random functions. 


Not only generating the faces using the random 
function but also their names are generated randomly 
from a list of thousand unisex names on the internet. 
Every one of them generated from the random 
function has a unique name and is part of the new 
school, thus the font | used here is our customized 
new school font. They would introduce themselves 
every time you create them. 


| love to sketch, but | didn't spend much time on 
drafting this time. | was trying to implement the idea 


MUNUS SHIH, DESIGN/CODER 


of "coding as painting", and just get my hands on the 
coding process without thinking too much. Change 
the concept as I'm coding new thines, get into ‘the 
zone’. 


| first started with the face, and eradually add more 
features to it. Before finishing the whole thing, | feel 
like there's something missing. VVhat else do we 
usually think of when we think of someone's face? 
\What is something that makes this face unique 
among all the faces we've seen. Then, ding dong! The 
idea of generating their names randomly popped into 
my head, and | soon found this library called 
‘pS.speech' to take my idea to the next level. 


Not only did | successfully pulled their names from a 
list of a thousand unisex names, but | also use 
pS.speech to randomly assien them their speech 
pitch, speech rate, and greeting words 
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SHERVIN SHIRMOHAMADI CON 495 810 WWW.PATSHIU.COM CON 496 811 


Happy birthday, Processing. 
You've made my life immeasurably better. 


Behaviour of light 
through aperture 


—~ 


Neel Shivdasani 
Instagram: @neel.shivdasani 
Twitter: @dataneel 


NEEL SHIVDASANI (@NEEL.SHIVDASANI) CON 497 SHUBHANG-SHARMA CON 498 


PISAROBRET. 202041cProcessing(java) 
ERWMHELI Mises! T. WERE 
AMET S Ole & < Processing@HITWA TS 


lam a high school student in Japan. | began 
to use processing in 2020. | like physics and 
often use Processing(java) to visualize some 
Physics Formulas. 


"Wave Interference Simulation" 
-2021.02.17 


BRODR, BE, WE, RRERETHS. 3 
RTAMCSISRORMENML, APRRTR 
WPS 

The number of wave sources, wavelengths. 
frequencies, and coordinates can be 
changed; the displacement of waves in 
three-dimensional space can be calculated 
and represented by points and lines. 


"Vegetative State" 
-2020.11.03 


TOF RIAMDBROFAR 'HECRHOS, O 
TOMBIESNIEED, 2Z020EOHRKRRERRL 
TBURIERA THB. 

This work was exhibited at the school festival 
"Ongaku to Tenran no kai (Music and 
Exhibition)" of my high school. It is a video 
work that expresses the social situation in 
the year 2020. 


“Roundabout” 
-2021.06.13 


RPO 'SOVEP ING bs o 
Literally "Roundabout". 


"Districts" 
-2021.06.01 


FVILICREFSFALORMS, MiOWALT 
UC BRIER. 

This is a video work in which several areas 
expand from randomly generated dots on a 
flat surface. 


"Lines & Alphabets" 
2020.12.18 


FILA PAY hE ME BRET S BRE. 
A video work in which the alphabet is 
composed of dots and straight lines. 


If you like my works, please let me know on 
Instagram (@shujit 5.9041) 


HISATOMI SHUJI (INSTAGRAM : @SHUJI15.904) CON 499 814 


| started writing a little bit of code every day in 2015, and since 


March 2019, I've been publishing my daily code on 
OpenProcessing, using the #dailycoding hashtag on social media. 


've been releasing my sketches under the CC license, allowing 
everyone to create and modify derivatives for non-commercial 
use with credit. Through #dailycoding, | was able to deepen my 
houghts on the possibility of "connecting and expressing 
everyday life and code," which is more important than 


echnological growth, of course, through practice. 


To write code with some purpose in mind. To stand in front of a 


blank canvas and draw out something that has yet to form an 
image. Concrete and abstract, mathematical and literary, 
algorithmic and improvisational, rules and deviations, playing and 


editing. Juggling all of these, writing code/sketches while 


seriously joking around, is what creative coding is for me, and | 
love them all. 


D 
F 


| want to continue and spread #dailycoding in the future. I'm 


grateful to the Processing community. 


https://openprocessing.org/user/6533/ 


https://bit.ly/takawo-dailycoding 
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AARON SIEGEL, DATADREAMER.COM 


THE SYSTEM 2.0 


CANDIDATE 52 ‘i ; 


CANDIDA - z 


tes and underrated 


wildlife. The outgoing 
personality of our co + 


eats, and traditions. Our Re: a community that moves us forward 


country is already quite 


well known as a country As “social media” was hitting the headlines to confuse us with its purpose, 
that is proud of its ; the Processing community inspired me to imagine something better. 


. « “he > PrOcesstT ij aT avi 7 ore rer ¢ ili 
world-famous trekkin g launched Openk rocessing in Apr il 2008. Hav ing shared over a million 
: : o oon open source projects since, an intertwine of artists, coders, teachers, and 
rou Tse. au" i students proved what an exceptional community we are. 


One that creates, inspires, and moves forward. Together. 


Cheers to the next 20, 
Carrie Sijia Wang, The System 2.0, Live-Streamed Performance, 2020 a rs 

Sinan Ascioglu 
I created this performance using p5.js during the 2020 lockdown in New York. Being part 
of the Processing Community has enabled me to rethink my relationship with technology, 


the internet, and all the other systems embedded in my everyday life. Visualization of the community interactions between 2008-2016 on OpenProcessing.org. 


Created by John Davies using Gephi at Nesta Foundation, UK, 2016. 
https://www.nesta.org.uk/blog /gallery-how-digital-tech-changing-art-and-design/ 
Creative Commons BY-NC-SA 4.0 International 
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FROM AN ARCHIVE OF WEBGL / 3D 
CONTRIBUTIONS IN P5.JS 


rough pass at webgl renderer and basic line drawing Browse files 


#° main (#598) 


vag wo 


@ indefinit committed on Dec 16, 2014 
1 parent 8a7eb4a Commit 96bT886143d073e1124a061092¢91341384b997¢ 


v updates 3d sketch example with fps stats, Browse files 
first attempt at reviving 3... 


wd primitives cube 


PY main (#644) 
9 v1.4.0 . 0 


@ indefinit committed on May 27, 2015 
1 parent 6191ab0 commit 3aa5751c4fa07f02fcO08fc1fb9890260F035597 


merges in sphere and cube primitives from Browse files 
karenpenglabs 

B main 

Ovi4a0 . 0 


@ indefinit committed on May 31, 2015 
1 parent 27fa3a0 commit £56d09b776010aac29b78693f3aa75f429eebald 


implements video as texture in webgl: WIP still Browse files 
buggy 

# main (#889) 

QO v1.40 .. 0 


@ indefinit committed on Aug 25, 2015 
1 parent 30a9d73 commit f89a81b0T732df92ed0e6f80a753a4846ab64414 


vy Merge pull request #1285 from Browse files 
mindofmatthew/3d-model-loading 
3d model loading 


PB main (#1370) 
Ov14.0 .. 0 


@ indefinit committed on Mar 5, 2016 
2 parents 7da7B7b + 2802b42 commit cO2@ccbeeQ69971bf fb52e548cdf7e0f34c 


KEVIN SIWOFF 


| started laying the ground work on the p5 3D 
renderer (webg)) in late 2014, and from 2015 to 2016 
was joined by Karen Peng and Matthew Kaney, as we 
collaborated on lighting, texturing, and 3d model 
loading features. It was exciting to be involved in 
p5js, and more broadly the Processing Community, 
because we were all learning and growing together. 
It felt a liittle like building a house we could all live in, 
where someone would start constructing a floor or a 
room, and we'd keep adding onto and around it— 
desperately trying not to break anything in an 
unforseen location. -Kevin Siwoff 
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Processing powers a collage based brand system for my f 


unique abstract covers and images generated by a deterministic system 
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lass Animalol{ 
Vector3D loc, vel, acc, prevloc;; 
color myColor; 
int sz; 
float theta; 
PathPlants myPather;//entity to communicate with, which controls the path 
//ArrayList pathArray; 
Vector3D myTarget; 
boolean gotTarget=falses 
myId; 
t myMood=1; //O=eat/1 
int myPrevMood=1;//to tra 
t wanderForFoodVar=20; / 
+ energyThreshold = 350 
energy = energyThreshold-energythreshold/2; 
t eatEnergyIncrement = 1000; 
wanderEnergyDecrement |= 
nt eatingCounter=59; //ke 
nt maxEatingCounter=50; / 
PlantO1 myPlantVictim; 


[* 
ANT 


f the certain time the AnimalOl needs to spen 
m the same value so the search for food will 


add behaviors: 
l.eat (what they do, but kill ressources) 
2.hunger: nee 
3.Age 

4.When eaten, 
5.die and pas: 
*/ 


//must get thd 


Vitro Sheil public void getFirstPlant(){ 


//look for next point to eat 
gotFinalPoint=false; 
myPlantVictim = myPather.gimmeAPlant() ; 
£(myPLantVictim!=nuLl){ 
Point p = myPlantVictim.getMeFoodPoint() ; 
//iF(myPlantVictim.amIActive()){ //only if the plant + 
myTarget.setX¥Z(p.x() ,p-y() ,0) 3 
//} else { 
//myMood=1; 
// ¥ 
} else { 
if (myPather.gotAPlant())getFirstPlant(); 


SZ=_SZ} 
theta = 0.0; 

myPather = _| 

//pathArray = myPather.getPathList() ; 
myTd=_id; 

maxspeed = 5.0f; 

maxforce = 0.5f;//was0.5 

wandertheta = 0.0f; 

//energy=503 

myTarget = loc.copy(); 

myMater = _myMater; 


public void checkPlantAvailability(float d){ 
// if (myPlantVictim==null) { 
if (¢myPlantvictim. amTActive()){ 
eat ingCounter=0; 
getNextPlant(); 


finish with another. This other professor is Daniel Shiffman, who I 
had the privilege of being one of his first students. Thanks to his 
; w enormous patience, he was able to untie the first knots of my 
programming Ariadna strings, which were made up of functions and 
variables, and made up some fabulous classes that inspired the last 
project that is described here: Digital Babylon. Throughout the entire 
process, he constituted the most valuable support. 


Digital Babylon is an interactive installation that is very different 
to the previous ones. In the first place, its aesthetic, which 
abandons work with real images in order to concentrate on synthesised 
ones. Synthetic and simplistic images, as the elements that make them 
up are intentionally simple so that movements and interactions can 
give the piece its intended feeling. 


The piece presents the viewer with a small virtual ecosystem. The 
system works without the need for the viewer's intervention, although 
she can actually intervene in arder tn alter it hv enterino a 
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A Handbook 
of Software Studies 


Winnie Soon 
Geoff Cox 


www.aesthetic-programming.net 
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pS js Instagram = 
Takeover q = oa IN TiRé | w& 
: setup, draw 
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Wace x frameRate 
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Happy 20th Birthday, Processing! 
| started processing and pS js back in 2017, 
and it has truly been a fantastic journey. 
Starting from sharing my sketches and tutorials, 
this year, | got do pS js instagram takeover and 
organized PCD seoul event with amazing people. 


The more | tap into creative coding, . Soe Lye nes Wwe 
the more | become thankful for this open source eae a 
and community. Through ps js, | found joy of 
programming and creating even when | was a 
complete newbie. Its welcoming spirit has given 
me so much confidence and inspiration. | hope to 
continuously contribute to this lovely community, 
so that more people can also have this 
incredible experience <3 
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pink-noise.info, | am real 2020 amanda stojanov 


software, interactive site, video, original audio 


Tangled 


Generative 3D form using the HE_Mesh library 
and a custom particle system driven by Perlin noise 
in Processing. Rendered using external software. 


duration: 2 minutes 10 seconds 


Hurricane 2019 
software, digital image projection, original audio 
duration: 1 hour (fifteen 4 min intervals) 


made t 
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Description: Website and tutorials about using Processing on Raspberry Pi 


URL: pi.processing.org 


Author: Maks Surguy (@msurguy) 


ze Tutorials for using Processing on Raspberry Pi 


Get Started 
Download The following tutorials explore topics specific to Processing on the Raspberry Pi: 
Reference 
Tutorials 
libraries 
Technical 
Social 


Imprint 


CAMERA 
by: Maksim Surguy 


(THESTZER CAPACITIVE TOUCH INTERFACE 
Surguy by: Maksim Surguy 


Caption: List of tutorials 


Adding more buttons ‘conten lectin all parts togetber 


AU. 


Caption: Example from a tutorial 


Caption: Example from a tutorial 


During Google Summer of Code 2018, under mentorship of Gottfried Haider, Maks created 
a responsive open source website with reference and tutorials about using Processing 
on Raspberry Pi. 


In these tutorials, readers can learn how to interact with sensors, cameras, buttons 
and other physical components to create interactive Processing sketches. 


MAKS SURGUY (@MSURGUY) CON 524 


x 


~ #ADULTING 


// 

// Play.P5.js 
declare sprites an 

// p : Ne! oe 

let tierra; // sprite, will nee 

let carlosmoreno; // sprite, play& 

images 

let cadaver; // sprite 

let gato1; // sprite, wi 

let gato2; // sprite, wiffineed 2 on US side 

let waterLog; // sprite,#fmotsam & jetsam will need 1 top 

edge touches border fro xico side 

let llanta; // sprite will need 1 top edge touches bank on US 

side 

let migraMan2; // sprite will need 3 [tom, dick, harry,] 

walking on banks 

let migraMani; // sprite 

let migraSUV; // sprite, will need 1 on center of lane 

gto, exp] currently have wrong art. facing wrong direc 

may not have art 

let migraHelo1; // sprite, will need 2 [huey, bell, 

let visa; // sprite, goal 

let migraHelo2; // sprite 

let migraMan3; // sprite 

let laMigra; // group, it may be better to call t 

opponents or hazards because they include flotsam 


need 1 mexico sid 
need 2 on US side 
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import java. 
import tox 


boolean del 
int idM = 6; 
float rot_Vfi 
float rot_xfi 
float rot_Zfa 


float w, h, 
h ] R Pector asse 
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digital_aquatics.py 


https: //github.com/tabreturn/processing.py-digital-aquatics/ 
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Created with py5S: a new version of Processing for Python 3.8+ 
Inspired by the Nodebox script, Aquatics! by Lieven Menschaert 


class Aquatic: 


def _init_(self, x, y, size, fillcolor, bul 


self.x =x 

self.y = 

self.s = size 

self.f = fillcolor 
self.r = red(self.f) 
self.g = green(self.f) 
self.b = blue(self.f) 
self.a = alpha(self.f) 


self.bubble = bubble 
self.bg = bgcolor 
self.eyelist = [] 


self.currentx = random(-self.s/8, self.s 
self.currenty = random(-self.s/8, self.s 


stroke_join(ROUND. 


def draw=risPupil(sel 
s = pupilsize/4 + 


if random(1) < 0. 
Fill(255-self, 
stroke(255-se| 

else: 

Shell 3¢ 
>>> 
>>> 


55 


ire 
TEU IT ET 


Skete 


TABRETURN.COM 


CON 528 


843 


Processing 
Community Day, 
Taiwan 


2021.10.19-24 
BSS CE CLA 


No. 17%, Section 1, Jianguo South Re 
Daan District, Taipei City, Taiwan (R 


#559 HL Supervisor Cr) SAC EE 


TAIWAN CONTEMPORARY CULTURE LAB (C-LAB) 
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MUHAMMED TAKRITI 
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JARED S TARBELL 


| fell in Move, with Processing and it saved my life. 


jon. remain. boundless. ten 
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Shader Mode for Processing Development Environment 


Simpleshader frag.gist RR 


t4 modelview; 
transform; 
3 normalMatrix; 


position; 
color; Osimploshader 
normal; 


4 vertColor; 
c3 vertNormal; 


main() ¢ 
gl_Position = transform + position; 
vertNormal = normal; 


EH console = A Frrors 


Figure shows a shader program running in the Shader Mode tool in PDE with multiple shader files (frag.gisl 
and vert.glsl) opened in separate tabs. The smaller sub-window shows a rendered model of the Blender 
monkey head “Suzanne”. 


The development of Shader Mode was inspired by a project Izza Tariq did for Google Summer of 
Code in summer 2018 and was later continued as part of their master’s thesis. The motivation 
behind developing this tool was to facilitate the use of shaders in Processing IDE and help bridge 
the gap between the creative ability of computational artists and the technical expertise expected 
of them. 


The concept of a Shader Mode was based on the idea of modes in Processing such as Java, 
Python, Android and p5.js (JavaScript) that allow flexibility with different types of platforms and 
programming techniques. Shader Mode is supported on Processing versions 3.5.x and higher. 


Below are different features and functionalities Shader Mode offers: 


Create and save new shader and sketch files 

Open and edit multiple shader and sketch files side by side 

Syntax highlighting of GLSL code to provide better code readability 

A shader menu for additional resources such as tutorials and shader templates 
Shader templates that include minimal shader code to give users a starting point to 
develop different types of shaders 

e A set of basic and advanced shader examples for inspiration 
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function setup( ){ 


whereDoYouStart(); © 
Sova: ae | 


So 


} 
function dra 
7 . > 
* takeAStepF (); ‘ 
Res ae | 
New? aay 


functign save( ){ 


ay ee 
=e here( uae oe 


onProcess 
fo WS 
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In 201 was asked to come up with anew visual identity for the 


a 


Computation Group’ run by John Maeda. Oncewe started the 
MIT MEDIA LAB MIT MEDIA LAB ‘MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB moter esonrns = 


hat we want tobe inspired by 
the playful and manifold Madia Lab business cards craated by 
the amazing Muriel Cooper and that ths visual identity could 
possibly become an algorithmic, generative identity. It would be 
inspired by the community ofthe Media Lab: Creative people 
from al kinds of backgrounds coming together, inspiring each 
other and creating something new. One logo that could move, be 
ftexibleand change, yet could be claimed by each individual lab 


‘member, whether student, faculty or staff. Given the legacy of 


Cooper and Maeda it was only fitting that we would use 
5 t y fitting 
Processing, crested by alumni len Fry and Casey Reas, to create 
= 7 2 a a} 7 I 
= = this generative visual identity wil always be grateful what 


a | 3 Prosser peers of a rec ins Proceesatew 
MIT MEDIALAB Mir MEDIA LAB MET MEDIA LAB eT MEDIALAB Wir MEDIA LAB taught me along the way. Richard The 
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TADRA is a sonically guided drawing oxperiais created.with,Processing 


software. 


ween drawing, Be icnicctime; shape and 
sound, ae participan iW. geometric primitives to commUnicate to others, | 
audio frequency and amplifgee changes occur aglong the tyond Y-axes. 
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RYAN THOMPSON - (TWITTER) @RT_ARTWORK 
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Proposal For A New Trans Flag 


Chelsea Thompto 
2020 


A few years ago I had a dream of a trans flag whose colors shifted 
as endlessly as its form in the wind. A version that spoke both to 
multiplicity and to the underlying system trans folks traverse. 


So, in mid 2020 I coded this 2D version, procedurally generated 
using JavaScript, this flag will infinitely change color in its 
horizontal bars. While the colors shift, the black and brown 
triangle portions stay the same, a gesture towards the need to 
center black and brown trans voices and experiences. The design 
draws from the original trans flag, the black trans flag by Raquel 
Willis, and the progress pride flag by Daniel Quasar. 


https: //cthompto. github. io/new-trans-flag/ 
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Uneven Geographies of Sound event at Wonderville, 
New York on Sep 15, the show is part of the CityArtist- 
Corps. Kengchakaj and | presented project Jitr. 


Jitr( Jas ) is a speculative, imaginary electronics 
ensemble using computer programing and live coding to 
generate and provide possibilities of decolonized 
Southeast Asia sound culture and its visual representa- 
tion. Jitr( das ) is interdisciplinary by its nature stretch 
beyond the art of sound making that covers improvisa- 
tion, live coding, electronics, music technology, storytell- 
ing, and visual art, aiming to reconcile the lost connection 
of Southeast Asia's shared heritage. 


The main narrative of Jitr surrounds three main domains, 
Including resounding the suppressed event in the past, 
raising awareness of unlawful and violent actions by the 
Thai government or its agents, and upholding decolo- 
nized sound. That all inspired by Thai activist, writer, and 
historian, Jitr Poumisak, or Chit Phumisak (Sas QUAAnq’), 
who was seen as a threat and killed by the Thai govern- 
ment in the 1960s. 


The project was developing during artists in residence at 
Babycastles in Summer 2021, post-pandemic. 

Special thanks to @nyfacurrent, @NYCulture, 
@madein_ny, and @babycastles for the support and for 
making it possible. 


* 
Jitr performance at Uneven Geographies of Sound at Wonderville 
photo by Apiwich Bangrapimolpong(@apiwichbang) 


a 
Jitr performance at Uneven Geographies of Sound at Wonderville 
photo by Dan Gorelick(@dagorelick) 


> Screen captures from the Jitr performance at Uneven 
Geographies of Sound event made using P5live and Hydra. 

- top: Jitr wrote in Thai that can also translate to ‘mind’ in English, 
- middle: ‘a good person' in Thai, 

- bottom: overlay of video and words in Thai can be read, 
controlled, and disappear. 
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Collective Dir 


Group Exhibition of USC Media Arts + Practice IML300 & IML400 Class 


Spring 2021 
Instructor Qiangian Ye 
Curator Qiangian Ye & Sarah Ciston 


Artists: Karen Abe, Ayse Cevikel, Abby Chen, Malia Dollaga, Jennifer Lee, Angela 
Rong, Katie Liu, Myrah Sarwar, Jonathan Tolentino, Annaliese Tusken, Megan 
Yeh, Annie Zheng, Qingyu Zhu, Daisy Bell, Jay Borgwardt, Katie Chan, Jacob 
Pettis, Mahira Raihan, Asha Rao, Emma Sykes 


USC IML300&400 


What is collective, what is digital, what is care in reconfigured spaces? How can 
we use code to express and embrace, revolt and rest? 


This exhibition invites visitors to experience the web-driven artworks and artistic 
research of coders and collaborators in Media Arts + Practice’s IML 300 and 400, 
as we investigated hypernarratives and networked justice (300), cybernetic 
gardens and other-worldbuilding (400). Along the way, we reconsidered technical 
approaches to multi-user experiences; interactivity; software libraries; and the 
aesthetics, protocols, and languages of the web itself. 


Collective Digital Care gathers our strength, gathers us together, gathers the 
digital harvest of code seeds and data packets planted at the start of an 
uncertain, unprecedented year. It is a record of time spent together and apart, 
time spent adapting and nurturing, time spent tending and weeding, time spent 
leaming and imagining the kind of interconnected networks we want to hold us 
together as we emerge, reconfigure, bloom. 
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Dear Processing, 


You were there for my first animation, VJ set, interactive installation, 
music video, livestream. | helped you draw lines and shapes, blend 
colors, read people’s code, and work on those little quirks of yours. 


Here’s to the next 20 years of enabling people to code, creatively. 


Jakub Valtar 


JAKUB VALTAR CON 95/7 VAMOSS - HTTPS://VAMOSS.COM.BR 
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FREDERIK VANHOUTTE (@WBLUT) 
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EXTENTIO - observational drawings 
Sergio Venancio (Brazil) 


Observational portrait drawings made with straight lines 
using Processing, OpenCV library (by @atduskgreg) and 
custom-made Al agents. 

Instagram: @sergiovenancio.art 
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Waving Grass 


Waving grass in P5 with typescript: https://wvinull.wordpress.com/2021/09/11/waving-grass-in- 
processing-p5-js/ 


Author: Jeroen Vesseur https://work.wvinull.com/ 
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Waving Grass in processing (p5.js typescript) 


Table of Contents 


[IMROGUCTION 2k sscecciscscessscoevedssecaseczecsesseencoscavacctsscesdscoscaesceeaesecveatsivetsai daviavasccasrivarses csvaseccscisssivevesssaces se 1 
Not trees but grass 
Warning typescript 
Waving grass 

Slide show (stills) 

The sketch... 

The application setup 

The code 
The Index.html.. 
The main class.. 
The grassFactory object. 
The grass object 

The final result... 

Final notes....... 

The code on GitHub.com. 


Further reading.. 


Introduction 


| saw the call for contributing a page to the Processing community catalog for the 20th birthday of 
the Processing Foundation and although my contribution to the community is very limited | was 
working on a waving grass sketch in Processing and at the same time | was looking for an 
opportunity to increase my collaboration skills. So this seems a perfect opportunity to give 
something back! 


My contribution has the form of a technical article on how | implemented moving bezier curves in 
Processing with the intention to resemble ‘waving grass’ in the wind. The idea started from a 
completely different angle though. I'm currently working with an AxiDraw Plotter and have been 
porting some old Processing 3 code to a Java based Processing solution for a generative art project. 
What | really wanted to achieve was to algorithmically create trees and feed them directly into the 
plotter. While scouring the internet for information to help me controlling the AxiDraw plotter | 
stumbled upon Daniel Shiffman's excellent and entertaining coding train tutorials on how to use 
vectors to mimic real life forces by creating this so called physics engine. This engine was the 
perfect solution to add to my generative art coding concepts to create trees and use 'natural' 
forces to alter the shapes of the trees. 


Not trees but grass 


Ok that's the why but of course my algorithmic trees were by no means ready yet and the physics 
engine was a completely new setup for me, so to start | dialed it back a little and tried to create a 


Author: Jeroen Vesseur http://www.wvinull.com 2021 1 
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| was first introduced to the | 
idea of creative coding 

through The Coding Train 
YouTube channel. After an 
initial introduction to the 
world of Processing, | 
wanted to dip my toes in 
deeper and luckily, | 
stumbled across a 
wonderful 4-day workshop 
conducted by Ambika Joshi 
(aka @computationalmama) 
in 2020 where | learnt the 
basics of p5js to recreate 
works made by South Asian 
women artists. I'm glad to 
have taken that opportunity 
since | now use creative 


coding quite frequently as a 
@n074b07 tool to explore ideas. 
Giving creative freedom to a 
computer makes it feel 


more like a companion 
helping build visuals. I'm 


G always astonished at the 
egen results it can bring about 
with very little code, and I'm 


Architektur ee dee Gee 


2017-2018 


Strategien 


such expression :) 


A generative catalog displaying a random Download the catalog from: 
selection from 10.000 images created by the — shorturl.at/mszP7 
twitterbot @n074b07 from April 2017 to 
August 2018. Contact: 

José Vicente Araujo 
All images and the catalog itself procedurally © DUNADIGITAL.com 
generated with Processing 3. @svent 


Sketch: 
cutt.ly/ironclad_Llily 
@sairamved 


JOSE VICENTE ARAUJO / DUNADIGITAL.COM CON 567 882 SAI RAM VED V (@SAIRAMVED) CON 568 883 
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PLAYMODES STUDIO CON 9569 884 HTTPS 


SANTI VILANOVA 


ALEXANDRE BAVILLARES 


Created with Processing + Python 3, using the py5 library. Code at <abav.lugaralgum. com/selected-work/processing2021>. 
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Haoyu Wang, Starry Everything, Kinect and Processing, Dimensions Vary 
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HENRY HAOYU WANG DOEKE WARTENA, WWW.DOEKEWARTENA.NL 


Processing user since 2003. Teacher, 
artist, designer. 


Generative systems, realtime anima- 
tion, data visualization, prints, 3D 
printing, laser cutting, light installa- 
tions, plotter drawing, wall drawings, 
media facades. 


MARIUS WATZ @MARIUSWATZ CON 9/7 
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2018 - B10 Digital Jazz 


CHRIS WELCH - @CHRISWELCH_72 


www. Cwvisuals.com 


2019 — Skull Continuum 235 


2021 - Chromatiles Interactive NFT 
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‘grown up", got a job, and so on. 


braitenberg vehicles, 
fractals and more. 


"ve M 
20); . 
rect( random(20), 


* a recursive function without crashing the computer. 
% There were so many brilliant artists and hackers 


* in the proce5Sing forum, 


* which I visited daily 
* When you understand them, they enrich your Life 


* in deep meaningful ways, and urge you always 


+ Iwas fortunate to be involved in projects, 
* to see and consider and create. 


+ considering that T could barely write 
+ the first Chinese translation of the website. 
* I collaborated with Casey, Jared, and Robert 


* on the Software Structures project 


% for Whitney Museum Artport, 
* But thanks to Processing and its conmunity, 


* (I could almost write a recursive function 
* the joys of coding stayed with me. 


* without crashing now) 


* in the Exhibtion section of the website. 
* 


# the room where I stayed up all night 
* I led a small team to complete 
* It's Like learning poetry or art history. 


* and really learned to code. 


* I sat next to a blue stove 
* in such an unforgettable circumstance. 


* I've forgotten how I was introduced 

* to proceSSing but I remembered 

* I made an applet of a pond of fish, 

+ and learned so much from the conmnuity: 


* When I met Casey in Ivrea, Italy, 
* I had just finished grad school, 
* where I had tried creative coding 
* one of the early sketches 


* but in unstructured ways. 
* For these and many more reasons, 


* thank you Processing! 


* that looked like a perfect cube, 
A 


* inside a modernist dormitory 

* that looked like a perfect arc. 
* So I learned proceSSing 

* In the next few years, 


* vector field 
* nonlinearity, 
* With regrets, 
background( 255 ) 


sizo(20,1); 
* I guess I 


* 
fi11(20,20, 


void setup() { 


void draw() { 
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DAVID WICKS @SANSUMBRELLA 


Decentralization was (and still is) the hope of many of us hacktavists, early builders and 
punks of the first generation of online weirdos, the first children to grow up with the 
internet and the last generation to remember life before it existed. In those early days, 
we saw the internet as a real promise, that it would make information free, democratize 
media, grant new forms of economic self-sufficiency. Many of us believed we could 
change the way the world works from behind our glowing screens. Some of us actually 
did that, and many things have changed, but not exactly in the ways we imagined. 


What does Processing mean to me? 


Being a contributor to open source projects we know that all of these tools are built by 
people. We have built systems to address ethics, we know if a system is lacking a moral 
code it is our responsibility to code it. | know this because | am a member of the 
Processing community along with other open source projects that helped me to build 
code with ethics at the forefront of our communities. When we build rules and logic into 
systems, we imagine a better future and listen to one another around fears, joy and 
possibilities for the things they want to see in the world. 


| created Wampum.codes to address exactly this issue. 

Wampum.codes is an ethical framework for software development based on the 
principles of co-creation as understood by my people (Seneca-Cayuga Nation of 
Oklahoma, Indigenous.) 


Like all members of the Iroquois Confederacy, we made wampum. A lot of people have 
a misconception about what wampum is - they think it was a form of currency. It was not 
currency - we used it as a tool for recording and regulating the different political and 
economic agreements that governed daily life. It was a decentralized means of 
recording contracts, something like a pre-Colombian blockchain, that encoded not just 
financial transactions, but also ethical values. 


The project of Wampum.codes is to try and imagine how we can weave ethics back into 
21st century technologies. We can embed these values as dependencies in code the 
same way we do in the rest of our package.json 


We don’t have to wait for experts and policy makers to make these decisions for us. As 
good as their intentions are, they don’t know what to do, and they will always be a step 
behind. This is our field, we know how to do it, and we are the ones who need to step 
up. By implementing a decentralized protocol around ethics in software, we can step in 
the right direction. We live our lives according to a moral code. The time has come 
to code our morals. 
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Queens College, CUNY 
Creative Coding Course 
Professor Danne Woo 
COMPUTATIONAL IMAGE STIPPLING Creabwecode.dannewoo-com 
16,384 POINTS, COMPUTED USING PROCESSING 


Displayed here are student projects 

; created using Processing and p5.js in the 
@) ARTLTXELS Creative Coding course at Queens College, 
CUNY. These pieces are created by Adolfas 
Lapsys, Kiana Wong, Kristine Albaran, 
Michelle Burk, Monique Lee and Zeran Li. 


PARASITE 


A FILM BY BONG JOON HO 


MIKE WONG (@ARTIXELS) CON 585 PROFESSOR DANNE WOO 


Whenever I introduce somebody to Processing and p5.js, I start by explaining that they're more 

than "just" coding languages or libraries. Sure, it starts with the code, but more importantly, 

Processing and p5.js are a community of people: learning, struggling, creating, and expressing 
themselves in new ways every day. 


I found my way into this community through the Java game dev world. I learned Processing for Ludum 

Dare 21 and instantly fell in love. I started spending time on various forums and Stack Overflow, 

and eventually I branched out from games, into creative coding, outreach, and education. I've even 
met people from the Processing community in person and at events like CC Fest. 
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Processing has let me direct my creative energy, has helped me figure out what I want to do with my 
life, and has helped me succeed in my career. But more importantly, Processing has given me a 
community of folks who understand that code is more than just ones and zeroes. It's people. 


‘ Premiere: 
Will.O.wisp 16 Mar 2005, 20-24.00 


Thank you to Casey, Ben, Lauren, Cassie, and Dan for building this thing we love so much. And 
special shout out to George, Saber, Kelly, the Upperline Code folks, and everybody hanging out 
on Twitter, Stack Overflow, and the forum. You're what makes Processing a community for me. 
Thank you. <3 Kevin Workman - HappyCoding. io 


KIRK WOOLFORD ( HTTPS://B.BHAPTIC.NET ) CON 587 902 KEVIN WORKMAN - HAPPYCODING.IO CON 588 903 


Chocolate Chocolate Add Some Milk was created by Kuan-Ju Wu in March 
2010 as a real-time augmentation / interaction homework for the Special 
Topics in Interactive Art & Computational Design course taught by Golan Levin. 


Kuan-Ju now teaches Creative Programming and Electronics at Jacobs Insti- 
tute for Design Innovation at UC Berkeley and California College of the Arts. 


ANDREW J WRIGHT | @CONCEPT_BLEND CON 9589 904 KUAN-JU WU CON 9590 905 
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Morphology 


A generative art project made with p5.js. Functions & geometries collectively give 
rise to various forms that waver between abstract & representational. 


Emily Xie, 2021 


EMILY XIE, GENERATIVE ARTIST. @EMILYXXIE CON 592 
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@XRISPY vege ane? 


CHRISTOPHER PHILLIPS 
UCLA DMA | 2010-14 


FOUNDER OF ART NOW CODING | artnowcoding.com 


AUDIO PAINTINGS | 2021 GALAXY BRUSH | 2021 a | 
Each pixel position and color is created from audio @@eeeee@GOu 8086 


tracks + original color of photo Each color is referenced from Hubble Space Photographic Data, 
and then hand painted to product an realistic abstraction. 


Original Full Body Sketch 


Name: 


Shuyu Xu 


Upper-Body Sketch Work Description: 


It is interesting to combine different parts of stories into 
a new one. This project makes use of this funny method to 


David lan Brown Original hand painted create a surrealistic drawing to tell a fantastic story, which 


abstract art + pixel Sorting technique creates an unexpected experience about narrative. Three people 


will exchange the upper-body and lower-body, creating a new 
character's story of an exquisite corpse-like Frankenstein. 
I combined three part of the body and draw them in p5js. 
This is a punk girl who loves electronic music very much. She 
always takes her bass with her wherever she goes because she 


PIXEL GRAFFITI | XRISPY 
+ DAVID IAN BROWN 


gets used to creating music immediately when she get some 
Lower-Body Sketch 


inspiration. This girl loves fashion but still not cares about 
by Yash Goyal 


her apparel very much. She believes that what makes herself 


good and comfortable is the most crucial thing in her life. 


@XRISPY CON 593 908 SHUYU XU CON 594 909 


20/11/24 


20f1/01/28 


} 
SouthAfrica/KRISP-EC-K005347/2020 


Country:South Africa 2020/12/24 


Scientific Visualization with Processing 


Time-space-based visualization of SARS-CoV-2 phylogeny 


URL: https://timespacephylogeny.xyz - 


if, 


sparc we 52172020 


a mesial KT EUKOS/2020 
a IndonesiaMNO-BUKO6Z020 


Some tools help in visualizing phylogenetic relatior 

of viruses based on their mutation patterns. However, 
merely associating phylogenies with time cannot enable 
full understanding of the geographical spread. Therefore, 
we proposed a method to associate phylogenies with 
both time and space, and combine them into a single + Edit 7 Heb y . . 
three-dimensional graph. 

We applied this method to visualize the phylogeny 
of SARS-CoV-2 causing COVID-19 to understand their Sip seer 
temporal and geagraphic spread with Processing. 


We subsequently generated a video to understand the | 
etup() 

vas (400, 400); A 
85); y 


spread of SARS-CoV-2 based on our system. Thre are more 
information and videos on our project website, 


Team: 


Masaki Yamabe, Visualization Design & Development iakAmetien 


So Nakagawa, Scientific Advisor 
Akira Wakita, Supervisor 
Kentaro Oku, Technical Support 


NHK Educational Corp., Scientific Research 


vyeVertex(290, 370); 
ex(350, 208); 
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YAZID, GENERATIVE ARTIST 
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ps * JS Contributors Conference 


Meet The Contributors! 


Frank-Ratchye STUDIO for Creative Inquiry, Carnegie Mellon University 
August 13-18, 2019 


How it's going: 


i Announcing the New p5.js Project Co- 
“* Leads, Qianqian and evelyn! 
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Processing Community 
Yuli Cai: Dance with Code” 

®Z: Fooling the Machine 
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B84): MinkeyFamily.com 
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KR: Creative Al, Collaborative Al and 
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13;00-14:00 | Jung Hyun Moon 
Webskeichbook+Machine Learning 


14:00-15:00 | Jiji Yu 
Glamotous Wearables / és 28, LEDEP ALE. 


1:00-2:00 | Erin Zhang 
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2019 PCD Shanghai Li## 


Organized by Qianqian Ye, Chang Liu, and Yuli Cai 


PCD SHANGHAI 


Zeping Fei: Genorativo Art Series: Possibility 
SAM: SMB Fat SwR2.0 2 
UZKZ: The Planet 
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p5 for 50+ 
teaching 


https://p5js.org 


po.Js 


Teach 


Every teaching has its own unique 


experiences, too! 
p5 Teaching Resources 


Search Filter 
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American Arts Incubator. ‘al Weaving & Physical 
Smarter Home (H == 3) Computing Workshop Series 


Lauren Lee McCarthy Qlangian Ye & Evelyn Masso 


P5JS.ORG/TEACH, INHWA YEOM, QIANQIAN YE CON 601 
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Heinz Holliger =< 


Contrechamps 


Z1 STUDIO (P5), NEONEO (GRAPHIC DESIGN) 


Using p5.js for data 


sketching allows me the 
to play with that : 
data, making it both resulting 
more meaningful (to image Is 
me, by virtue of this like the skin 
expressive 
endeavor) and less a snake 
ee sheds 
using un- ; 
conventional visual (an artifact 
mappings, or ofa 
deliberately omitting 
some or all labels). Process 
In the process of that 
constructing these tend 
glyphs, | can craft a extendas 
familiarity or - beyond the 
hopefully- an . 
intuition for the data. artifact) 
oom | | 
= The passage of time sloughs data, = ane 
== .. leaks numbers and bits left and right. = } 
J -— i. Animation and interaction, the way = 
= that size and shape and position can = 


heave to show change is all part of 
how visual choices construct time. 


Randomness helps to deconstruct 
false certainty. The most usable tools 
for representing data visually take so 
many liberties. They seem to want to 
make everything look a lot more 
a certain than it really is! The sharp 
a edges and precisely-measurable sizes 

imply a false certainty. | don’t want to 
| flood the overall visual milieu with 

things that boast incommensurate ae 
a certainty, but | want to make my . 

tapestries of shapes and colors. 
= a . This is how | look at data that is 
difficult to look at too directly, with | 
which | need familiarity and time. 
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INTERACTIVE ANIMATION 


P5.JS4 GOOGLE TEACHABLE MACHINE 
An interactive web=based program that reacts 
to the sound environment, detecting harmony.and noise. ; 
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YUFENG ZHAO; ONCE UPONA TIME CON 607 922 ANNIE ZHENG CON 608 923 


Made with 
P5JS 


Made by 
Lingyi Zhou 


Left Top: 
Procedural 
Face 
Generator 

Left Bottom: 
Pattern 
Drew 


With Math 


YAYUAN JOYCE ZHENG CON 609 LINGY| ZHOU 
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Spatial tracking + Multi-touch surface ~ 
iti-touch input ge 


Sor (45°) + embedded laser a 


https://preview.p5js.org/yiqingzhou/present/2mMMNU9PHv 


Incense Clock 

In ancient China, incense was used as a timekeeper. An incense stick burns out indicates SpeckleSense exploits laser speckle sensing for precise high-speed 
that 5 minutes have passed. Nowadays, we will still say "before the incense is burnt", which ci : ae : 
SS at =n low-latency motion tracking, which can be applied to a wide range of 


interaction scenarios and devices. 
In this project, | reproduced the incense timekeeper with p5.js. The incense stick slowly 
burns, and it takes 5 minutes for it to completely burns out. And the color pallet will change Jan Zizka Alex Olwal Ramesh Raskar 


olwal.com/specklesense 
according to the time of day. 


YIQING ZHOU CON 611 926 JAN ZIZKA, ALEX OLWAL, RAMESH RASKAR CON 612 927 


Sound reactive slit- 7 : 
scan remix of the 

1987 film Wahnfried 
for the performance 
of DJ Spooky at 

Rifts & Scratches 
exhibition at Richard | 
Wagner Museum 
Bayreuth in May | 
2017. 

Michael Zoeliner ° 
#emi i 

Protessing ’ 
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tion plotter 


procedural terrain generator 


NOLAN ZUREK 


KIL AC RS HUF AZNO ADE WHY 1y 
MW nan KENLMLSINFVPANKALL 
EUPRDIG WU GM4E KEES YEO AIH 
Leva ‘QaY PERRI KIERAN RY 
MVEKT eATRBLS MP>LY REALS SAW 
VbTEFI AAT TAR APT OR AM KAD 
mebkwo SUI FEW Mr TUREV ARS 
QZYWAv IN FAFHNPISAS HLS TAA 
KASUNK AN AIAS VWV ER VET Mal 
EMMA TUGANETLY Rs AREY LEM 2 
| AGRYERAYAIY IVER Ru Ys AIS 
FEQFLGARKWe bats HITHER ICED 


generator 
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my_first_sketch | Processing 3.5.3 


//At the start of 2019, I was struggling with depression. 


@ //Things quickly went from bad to worse. 


//By springtime, I was on sick leave incapable to get up and go to work. 


//My days were mostly spent in bed, showering became optional, and the diet was instant noodles. 


tn = 20; 


void setup() { 
size(2250,3000) ; 
frameRate (1); 


//One of my biggest demons was the decline of my cognitive abilities caused by the dep 
//Making me feel even more worthless than I already did, 
//viciously spiralling me down into greater darkness. 


oid draw() { 
//It was at this time in my life that I discovered Processing. 
//1 started working on small prompts, sometimes taking me days to figure out. 


for (int i = ©; 7 < width/n; 4 = i+2) { 
for (int j = 0; j < height/n; j = j+1) { 
111 (random(255)) ; 
rect (((iawidth) /n) , ((jawidth) /n) ,width/n,height/n) 
//The quick feedback loop playfully showed me that I hadn't lost my analytical reasoning. 
//When things worked out it made me feel good about myself. 
//When they didn't, it gave me a purpose for the day. 
x 
3 


//Processing provided me a way out, 
//together with therapy, eating healthy, moving my body, 


//spending time with loved ones, patience, and compassion. 


//Today my demons are kept at bay, 
//playing around in Processing is a daily practice. 


saveFrame("output/####.png"') 5 


//I came to draw with code, 
//1 stayed for the community. 
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/*incantations for a radical future 
Code is a lot like magic; put a few glyphs in the right 
order and you can summon almost anything. 

we don't need capitalist logic. 
“Learn to code” has become something of a cultural imp- 
erative, a way to futureproof oneself from professional 
obsolescence. It is the bootstrap by which communities 
are told to lift themselves up and improve their social 
and economic conditions. 

As more women and people of color enter soft- 
ware development roles, the labor of coding is devalued. 
Anincrease in diverse hires has already led to an over- 
all decrease in salaries, and the wage divide is as high as 
20% between white male programmers and every- 
one else. Learning to code does not address structural 
inequities. 

In acreative community, coding can be a powerful 
and liberatory practice. But when we only view code 
as ameans of economic survival, it can never be empow- 
ering because labor will never free us. 

we need community. 
Community is more than bodies in a room or acon- 
nection shared through wire and glass. 

Community is mutual care and sharing know- 
ledge and making art and free childcare and wheelchair 
accessibility and a place to pump and mobility- 
aware seating and little kids talking during the presenta- 
tions and vegan lunch options and brown skin and live 


captions and online streaming and gender neutral bath- 
rooms and si habla espanol and hair that looks like 
mine and asking what we can do for each other and ever- 
ybody feeling good in this space we build together. 


we need every contributor. 


With software integrated into so many aspects of our 
public and private life, the distinctions between users and 
creators are collapsing. In open source, we depend on 
teachers, learners, artists, activists, developers, organiz- 
ers, and volunteers of all sorts to sustain our work 

and community. Whether writing social codes or compu- 
ter code, we are all contributors. 


we need collaboration. 


In Computer Science departments across higher ed- 
ucation, to share one’s code is to “cheat.” Programs that 
measure software similarity and monitor students’ 
keystrokes are used to catch code plagiarists. Even talk- 
ing about a programming assignment can be seen as 
a violation and subject to punishment; solutions must be 
derived independently, or not at all. 

In real life, repurposing old ideas to address new 
challenges happens all the time. Building on the 
work of others is necessary, celebrated, and efficient. We 
understand that most problems are better solved 
collectively; and yet, the architects of our increasingly 
software-dependent society are discouraged 
from working together. 

| want to abandon the individualist, competitive 


model for teaching software development. Code should 
be shared, modified, remixed, revised, paraphrased, 
quoted, derived, copied, and pasted. 

How far can we possibly go if everyone has to in- 
vent their own wheel? 


we need a caretaking ethic. 


As open-source contributors, we understand the value of 
sharing our work beyond the confines of proprietary re- 
striction. But when our code can be weaponized against 
entire communities, our art can be minted and sold 
without our knowledge, and our intention of openness 
can be corrupted, exploited, and privatized to enrich 
the wealth of the morally bankrupt—we are faced with a 
conundrum. 

Amidst the proliferation of NFTs, partnerships with 
ICE, and other moral concerns, open source commu- 
nities must contend with the ethics of unfettered access. 
This is not merely a philosophical issue, but an exist- 
ential one; when developers feel their work is misused, 
there is little recourse beyond removing their work 
from the public domain. 

| want licensing models that are based on prin- 
ciples of consent. | want ongoing and revocable licenses 
that are granted enthusiastically. | know that people 
will say this kind of restriction is antithetical to the goals 
of open source, but | disagree. Black folks and Indi- 
genous peoples know well the responsibility to protect 
our communities from economic and cultural 


exploitation, andthe consequences for not doing so. (Per- 

haps relatedly, there are even fewer of us in open 

source than in tech overall. Is that a tolerable restriction?) 
There is a critical distinction between gate- 

keeping and caretaking; one gives limited access to a 

few, while the other ensures continued access for 

everyone. It’s imperative that we recognize the difference. 

*/ A.M. Darke 
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Instagram: @12niki14. 
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@a.mehow.c. 
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Rozina Aamir. 


CON 004 319 
@aamirshaikh95. 


CON 005 320 
“Hubbub”, by 
Angelabelle Abarientos, 
1G: @0.1.a.b. 


CON 006 321 
@aduarte.io. 


CON 007 322 
Tanve Agerwal. 


CON 008 323 
Arianna Agudio, 

Communication and 
Interaction Designer. 


CON 009 324 
Memo Akten, @ 
memotv. 


CON 010 325 
Hind Al Saad @ 
hindgalsaad. 


CON 011 326 
joshuaalbers.com. 


CON 012 327 
Ale @414c45. 


CON 013 328 
algorat.club, @algOrat. 


CON 014 329 
Christo Allegra/ 
christoallegra.com. 


CON 015 330 
Juan Alonso (@kokuma). 


CON 016 331 
https://www.instagram. 
com/alptugan/. 


CON 017 332 
@amandaghassaei. 


CON 018 333 
@anderkoy. 


CON 019 334 
@andor_saga. 


CON 020 335 
Alexandre Andrada - 
Title: man += machine - 
@aand.lab. 


CON 021 336 
Kyle Ang, kyleang.com. 


CON 022 337 
Anushka aka 
opheliagame. 


CON 023 338 
Name: Anxious to Make 
(Liat Berdugo + Emily 
Martinez) 

Title: Confidence 
Generator Link: 
https:// 
anxioustomake.ga/ 
confidencegenerator. 


CON 024 339 
Aranda\Lasch, @ 
arandalasch. 


CON 025 340 
Name: Aranya (Ritesh 
Lala), Twitter: @ 
Zenaranya. 


CON 026 341 
@ArjanBytez. 


CON 027 342 
Lolo Armdz (@armdz). 


CON 028 343 
Joey Aronson, www. 
aronsOn.com. 


CON 029 344 
Art Blocks. 


CON 030 345 
Kim Asendorf. 


CON 031 346 
Valentine Cat, created 
14th February 2015 by 
Rain Ashford. 


CON 032 347 
Copyright: Jorge Ayala 
+ Alessio Erioli 
Photo & Model: 

Atarah Atkinson 

Year: 2014. 
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@aymdes, Aymeric 
Descamps, 
designer. 


CON 034 349 
Mitul S Ayyod 
(Instagram - @ 
mitulayyod). 


CON 035 350 
@b2renger. 


CON 036 351 
@b3aribeiro. 


CON 037 352 
Ari Bader-Natal. 


CON 038 353 
Justin Bakse 
compform.net. 


CON 039 354 
Bert Balcaen, 
Corneel Cannaerts 
and Jan Vantomme. 


CON 040 355 
Giorgia Bandiera & 
Maria Alessandra 
Fratta. 


CON 041 356 
Giorgia Bandiera, 
Visual Designer, 
behance> 
giorgiabandiera @ 
knockthedot. 


CON 042 357 
Lali Barriére, 
lalibarriere.net 


CON 043 358 
xavier barriga abril. @ 
runamora. 


CON 044 359 
Beardcoded. 


CON 045 360 
M. James Becker @ 
mjamesbecker. 


CON 046 361 
George Benainous, CS 
Educator. 


CON 047 362 
Frank Benkelmann| 
Twitter: 
@benkelmann. 
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Beta HSU. 


CON 049 364 
Mrityunjay Bhardwaj, 
Head of Al, mrityunjay. 
mi. 
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Nicola Bischof. 


CON 051 366 
Joélle Bitton. 


CON 052 367 
Jaap Blonk. 


CON 053 368 
name: Jonas Bo 
Twitter: @k4brio 
Insta: @jOnasbo 
year: 2009. 
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Eleonora Bonorva, 
Nicola Bischof, 
Instagram of Eleonora: 
@eliiiifant. 
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Jay Borgwardt, @jay. 
borgwardt. 


CON 056 371 
David Bouchard 
(https://deadpixel.ca). 
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Claudia Brambilla. 
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Jono Brandel. 
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Fred Briolet. 
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Mike Brondbjerg (@ 
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CON 061 376 
Ashley James Brown. 
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Buffalo Geological 
Consulting buffalo@ 
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CON 063 378 
p5,jsillustration by Erika 
Bulger (erikabulger. 
com), description by 
Patricia Huang. 


CON 064 379 
bustavo.com. 
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Cacheflowe / Justin 
Gitlin. 


CON 066 381 
Alfredo Calosci- negot. 
net. 


CON 067 382 
https://www.instagram. 
com/camillerouxart/. 


CON 068 383 
camilosandoval.de. 


CON 069 384 
Aproject by Carlson 
Garcia (Esteban Garcia 
Bravo, Max Carlson and 
Aaron Zernack). 


CON 070 385 
Anna Carreras @ 
carreras_anna www. 
annacarreras.com. 


CON 071 386 
Rodrigo Carvalho|@ 
visiophone_lab. 
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Guillermo Casado. 
Peripecio. Penrose 
layouts. 
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Diego Cataldo - 
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2021). 
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Ricardo Cedefio 
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Chan Jun Shern (@ 
junshern on GitHub). 
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Katie Chan. 
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Angela Chang, Github: 
https://github.com/ 
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Anny Chang. 
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Michael Chang (@ 
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Tingwu Chang. 
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@CharStiles. 
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lose Chavarria/ 
Instagram: @chavis. 
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CON 083 398 
Han Chen. 


CON 084 399 
Face Generator - Kayla 
Chen|MFA Design & 
echnology / Parsons 
School of Design 
Critical | Computation 
Lecture + Lab|https:// 
cclab-kaylachen- 
portfolio.glitch.me| 


cheny184@newschool. 


edu|IG:ys.kayla. 


CON 085 400 
Georgios Cherouvim - 
https://ch3.gr. 


CON 086 401 
Hye Min Cho, 
hyeminchocho.com. 


CON 087 402 
CHRIST L- PARSONS 
MFADT 23’. 


CON 088 403 
@chrleon. 


CON 089 404 
alm chung (@ 
nekofutura). 


CON 090 405 
Citizen Sticks: Emily 
Bright, Garrett Beleu, 
Joel Slayton, Steve 
Durie. 


CON 091 406 
John Clavin. 


CON 092 407 
Co-de-iT (team: 
Tommaso Casucci, 
Michele Semeghini) 
Year: 2014 Link: 
https://www.co-de-it. 
com/p5experi 
mental-3d-printing. 
html. 
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cocopon. 
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code &share[], 
Aarhus, www. 
pcdaarhus.net, IG: 
codeshareaarhus. 


CON 095 410 
+CODE Cultura Digital 
-pluscode.cc - @ 
pluscodefest. 


CON 096 411 
Communication 
Design/ Hof University 
/ Campus Muenchberg. 


CON 097 412 
Casey Conchinha 
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Louise Lessél 
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CON 098 413 
Michael Connolly. 
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Stefano Contiero // 
stefan_contiero. 


CON 100 415 
Alba G. Corral. 


CON 101 416 
Akio Correll. 


CON 102 417 
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cosmicbhejafry.github. 
io/. 


CON 103 418 
Kaue Costa // kaox.tv. 


CON 104 419 
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announce the Creative 
Code Stammtisch 
monthly meetup in 
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creativecodeberlin. 
github.io/Stammtisch/. 
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Creative Coding 
Amsterdam https:// 
twitter.com/ 
cc_amsterdam. 
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Creative Coding 
Madrid. 
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The community of cre 
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The community of 
creativecodingutrecht. 
nl. 
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The community of 
creativecodingutrecht. 
nl. 
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creativecodecollective. 
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CreativeCodingCircle 
ARTIS. 
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Jeanne Criscola. 
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Sterling Crispin. 
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CS4ALL. 
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James Curran @ 
minusminusmusic. 
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@cyberia. 
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czausner.com. 
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Name - Ankita 
D'Souza Instagram- @ 
onecuriousdsouza. 
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Luca Damasco, Github: 
Luxapodular. 
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DanDan_DCA. 
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Danie’Lopes. 
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Manaswini Das (GitHub: 
manaswinidas). 


CON 124 439 
Rupak Das. 
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DataFlaw - https://www. 
liinks.co/dataflaw. 


CON 126 441 
Aren Davey (Twitter: 
@_aahdee_) 


CON 127 442 
Erica David, |G @erica. 
david230. 


CON 128 443 
Jeff Davis. 


CON 129 444 
Joshua Davis / 
PrayStation. 


CON 130 445 
Ted Davis, GH: @ffd8, 
IG: @teddavisdotorg. 


CON 131 446 
Brendan Dawes. 


CON 132 447 
dcuartielles. 


CON 133 448 
Flor de Fuego lig: @ 
flordefuega | https:// 
flordefuego.github.io/ | 
tw: @flordefuego4. 


CON 134 449 
@deconbatch. 


CON 135 450 
Fanny Demier. 


CON 136 451 
Fanny Demier and 
Kajetan Som. 


CON 137 452 
Fabian Dennler. 


CON 138 453 
Matt DesLauriers 
(mattdesl). 


CON 139 454 
DigitalColeman. 


CON 140 455 
rafa diniz - creative 
code educator and 
artist | @rafaddiniz @ 
codigos_fazem_arte. 


CON 141 456 
@diogo_navarro. 


CON 142 457 
Andrea Diotallevi. 
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Victor Doval. 


CON 144 459 
Dr. Woohoo! 
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R. Luke DuBois. 
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Karan Dudeja. 
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Gabriel Labov Dunne. 


CON 148 463 
Steve Durie, CADRE 
Media Lab, SJSU. 
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E.C.H. 
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@eddietree. 
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kellyegan.net. 
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Miguel Elizalde / @ 
urbaninfrasound. 


CON 153 468 
Ursula Endlicher, www. 
ursenal.net. 
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Equipo eQuills: Andres 


Ochoa, Andrew 
Alva, EliRamos & 
Juan Fuentes. 
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Mark Ericson, 
@m_cericson. 


CON 156 471 
JM Escalante. 
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ethan_omo on 
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Brian Evans. 
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evhands. 
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Rafael Fajardo. 


CON 161 476 
FAL Works. 
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BehnazFarahi. 
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Critical maker. www. 
instagram.com/ 
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CON 163 478 
Nahum Farchi. 


CON 164 479 
instagram.com/ 
feamonkey. 


CON 165 480 
Nicholas Felton. 
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Yu-Ting Feng. 

CON 167 482 
German Fernandez 
Cantos. 


CON 168 483 
Rodrigo Fernandez 
Flores (@ 
templodespejos). 


CON 169 484 
Luis Ferreira (@schuur. 
creations). 


CON 170 485 
Nick Fox-Gieg. 


CON 171 486 
Luis E. Fraguada. 


CON 172 487 
F#READY, GitHub: 
https://github.com/ 
FreddyOffenga 
Demozoo: https:// 
demozoo.org/ 
sceners/35273/. 


CON 173 488 
Saskia Freeke. 
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Jeff French, jwfrench. 
com. 


CON 175 490 
Max Frischknecht, 
https:// 
maxfrischknecht.ch/. 
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@frwrdnet. 
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Masaru Fujii/@ 
ozachou_g. 


CON 178 493 
@functiondraw. 


CON 179 494 
Julien Gachadoat| @ 
v3ga. 
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Sergio Galan @ 
sergioeclectico 
(twitter), Victor 

Diaz @victordiaz 
(github). 
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https://games.qu.edu/. 
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gammastop. 
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Ananya Ganesh. 
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Title: XV. by 

Esteban Garcia 
Bravo (@snebtor) in 
collaboration with 
Aaron Zernack(@ 
wound_design) and 
Jorge Garcia. 


CON 185 500 
Sofia Garcia| @ 
sofiagarcia_io. 


CON 186 501 
@garrettbeleu Artist. 


CON 187 502 
https://www.instagram. 
com/genetypo77/. 


CON 188 503 
gerard_sgs Twitter. 


CON 189 504 
josh giesbrecht. 


CON 190 505 
gin_graphic. 


CON 19 506 
giy (nttps://gangilyi. 
xyz/), Spirals - https:// 
github.com/morfant/ 
pglr/tree/master/ 
spirals_spirals. 


CON 192 507 
Zahra Golestanha. 


CON 193 508 
Amy Goodchild. 


CON 194 509 
Twitter: @gorillasu - 
Blog: gorillasun.de. 


CON 195 510 
Title: Movement / 
Author: Gotutiyan. 


CON 196 511 
Vadim Gouskov insta: @ 
vadim.gouskov. 


CON 197 §12 
Ryan Govostes. 


CON 198 5 
Gramener. Twitter: 
Gramener. 


@w 


CON 199 514 
daniel grantham. 


CON 200 515 
twitter: @grasser_ 
alex; homepage: 

alexandergrasser.com. 


CON 201 516 
Ira Greenberg. 


CON 202 517 
Stalgia Grigg. 


CON 203 518 
Sarah Groff 
Hennigh-Palermo. 


CON 204 519 
Benedikt GroB, 
Hartmut Bohnacker, 
Julia Laub, Claudius 
Lazzeroni, Joey Lee, 
Niels Poldervaart. 


CON 205 520 
@grunskm. 


CON 206 521 
Nuno Guedes Silva. 


CON 207 522 
Bilge Gtinay (Dist 
Collective). 


CON 208 523 
Mario Guzman, @ 
marioguzzzman, 
https://www.mario- 
guzman.com/. 


CON 209 524 
Andreas Gysin & Sidi 
Vanetti. 


CON 210 525 
Peter Ha| Instagram: 
@hiddenenigma 
Project: 365 
Processing, 2014 
https://peterha. 
net/projects/365- 
Processing/. 


CON 211 526 
Hanif Haghtalab, Noise 
Field Study, https:// 
www.instagram.com/ 
hanif.hb/. 


CON 212 527 
Gottfried Haider. 


CON 213 528 
Xiaoxu Han, https:// 
xiaoxu-portfolio.glitch. 
me/. 


CON 214 529 
Oliver Hanstein 
(Nodeart). 


CON 215 530 
Usman Haque. 


CON 216 531 
Alex Harding. 


CON 217 532 
Connor Hasting. 


CON 218 533 
Fabian Heller, 


Instagram: @ 
farnfreund. 


CON 219 534 
Daniel Giles Helm. 


CON 220 535 
@henry_null_. 


CON 221 536 
Caroline Hermans. 


CON 222 537 
Leander Herzog @ 
lennyjpg. 


CON 223 538 
Julian-Anthony 
Hespenheide (ig: 
julian_hespenheide/ 
git: https://github.com/ 
ndsh/www.julian-h. 
de). 


CON 224 §39 
the weight of light 
2015), Martin 
Hesselmeier & 
Andreas Muxel, 
physics engine (P5) by 
Micha Thies. 


CON 225 540 
Hevey (@HeveyArt - 
https://hevey.art). 


CON 226 541 
yler Hobbs. 


CON 227 542 
Robert Hodgin. 


CON 228 543 
hoehoe, Buddha 
Machine Mirage, TW:@ 
hoehoe. 


CON 229 544 
Jona Hoier. 


CON 230 545 
Kate Hollenbach 

/ @kjhollen/ 
katehollenbach.com. 


CON 231 546 
Michael Honey (twitter: 
@michaelhoney). 


CON 232 547 
HosodaMath. 


CON 233 548 
Jiangnan Hou, IG: @ 
jiangnan_nichole. 


CON 234 549 
John Houck. 


CON 235 550 
Toby Howard @ 
tobyhoward. 


CON 236 551 
https://huaigulin. 
github.io/. 


CON 237 552 
nick hubben/@ 
klaushubben. 


CON 238 553 
hubstruct. 


CON 239 554 
Chris Hunt and Ben 
Dunks. 


CON 240 555 
@hypereikon. 


CON 241 556 
"ve made up my mind 
to develop anew 
rontier of art with 
Processing. 


CON 242 587 
Igin ig6zii (Dist 
Collective). 


CON 243 558 
Lisa lhde, GitHub: @ 
julisa99, website: 
isain.de. 


CON 244 559 
om Igoe. 


CON 245 560 
Psychedelic eye by 
ilithya - @ilithya_ 
rocks. 


CON 246 561 
incre.ment. 


CON 247 562 
Indigemoji. 


CON 248 563 
Codice Inutile, www. 

codiceinutile.org, @ 

codiceinutile. 


CON 249 564 
@isabelazamith. 


CON 250 565 
Marcinia Jacquet @ 
marsenner. 


CON 251 566 
Mahima Jain (@ 
mahima_)). 


CON 252 567 
Jbarbeau.art. 


CON 253 568 
Jeff (ippsketch). 


CON 254 569 
Jeffrey - dodely.dev. 


CON 255 570 
Florian Jenett. 


CON 256 671 
Lazar Jeremic, lazar.ch. 


CON 257 672 
Yuehao Jiang, Artist 
based in Los Angeles, 
IG: yuehao_jiang. 


CON 258 573 
@jmutterer for Colmar 
Basket. 


CON 259 574 
@jnsdbr. 


CON 260 575 
@johnbcarpenter // 
http://johnbcarpenter. 
com. 


CON 261 576 
Jerel Johnson. 


CON 262 577 
Joshua Marris. 


CON 263 578 
Jucarvidal, my nameis 
Juan Carlos vidal, |am 
afullstack developer 
but! lean more towards 
the frontend, and! 

love interactivity and 
generating experiences 
lam Colombian, my 
twitter is @jcvmarin, 
myinstagramis @ 
jevidal81. 


CON 264 579 
twitter, instagram: @ 
julian__weis. 


CON 265 580 
@Julien_Espagnon. 


CON 266 581 
Jun, Insta: 
void_draw_the_future. 


CON 267 582 
@JunieGenius. 


CON 268 583 
Rodrigo Junqueira 
(Rodjun) - github.com/ 
rodjuncode. 


CON 269 584 
Verginiya Kadina, 
@g.i.n.iy.a. 


CON 270 585 
maja kalogera. 


CON 271 586 
Instagram Handle: @ 
azz_adiName: Aditya 
Kanade. 


CON 272 587 
Ashley Kang/ 
ashleykang.dev. 


CON 273 588 
Indhu Kanth, @being_ 
ink (Instagram). 


CON 274 589 
kasperkamperman. 
com(@ 
kasperkamperman). 


CON 275 590 
Roni Kaufman. 


CON 276 591 
website: herry.kim. 


CON 277 592 
Joy Juyeon Kim. 


CON 278 593 
MiHyun Kim, 
Assistant Professor 
of Communication 
Design at Texas 
State University. 
https://www.insta 
gram.com/ 
mihyun____kim/. 


CON 279 594 
Name: Yonsan Kim, 
Social Media Handle: @ 
yonsankm. 


CON 280 595 
Kitsunebi, @Dai_ 
Hanabi on Twitter. 


CON 281 596 
instagram: 
kleemotfd, github: 
kcarollee. 


CON 282 597 
Aaron Koblin. 


CON 283 598 
Aaron Koblin and 
Daniel Massey. 


CON 284 599 
Osman Koc (@ 
kocosman). 


CON 285 600 
Koh Achim, Data Editor 


at Alookso. @achimkoh. 


CON 286 601 
Tetsu Kondo, Tetraleaf. 


CON 287 602 
Tetsu Kondo, 
Processing Japanese 
Translation. 


CON 288 603 
Jules Kris www. 
juleskris.com. 


CON 289 604 
Jan Kubasiewicz & 
Scott Murray. 


CON 290 605 
Rupesh Kumar 
(iamrupesh.me). 


CON 291 606 
Kumu Jacqueline & 
Kumu Tiana. 


CON 292 607 
kusakari (Twitter 
@kusakarism, 
OpenProcessing 
https:// 
openprocessing.org/ 
user/224308). 


CON 293 608 
LadyKStudios. 


CON 294 609 
Laleh Mehran & Chris 
Coleman. 


CON 295 610 
Sam Lavigne. 


CON 296 611 
Mariana Leal - @ 
lightesthand on twitter. 


CON 297 612 
Marie LeBlanc 
Flanagan //@ 
omarieclaire. 


CON 298 613 
Jorge Ledezma. 


CON 299 614 
ElenaLee Gold(@ 
elenaleegold). 


CON 300 615 
Lauren Lee McCarthy. 


CON 301 616 
Ahree Lee/ www. 
ahreelee.com. 


CON 302 617 
Joey Lee | https:// 
jk-lee.com. 


CON 303 618 
New Media Artists 
Louise Lessél & 
Jingyu Wen, @ 
louiselessel @ 
monica_jingyi. 


CON 304 619 
Golan Levin. 


CON 305 620 
Li, Yigi Eyes- 
Experimental Clock 
(https://kiwili- 
portfolio.glitch.me/ 
p3.html). 


CON 306 621 
LIA (www.liaworks. 
com). 


CON 307 622 
karlos g liberal (@ 
patxangas). 


CON 308 623 
Daniel Lichtman. 


CON 309 624 
Jeff Lieberman + Bill 
Washabaugh. 


CON 310 625 
Wolf Lieser (DAM). 


CON 311 626 
Kenneth Lim, 
limzykenneth on 
Github. 


CON 312 627 
Adelle Lin, @adellelin, 
https://github.com/ 

adellelin. 


CON 313 628 
Justin Lincoln. 


CON 314 629 
Liquido Preto, 
instagram.com/ 
liquidopreto. 


CON 315 630 
@lisajamhoury. 


CON 316 631 
Connie Liu Twitter/IG@ 
conliuart. 


CON 317 632 
Katie Liu (https:// 
katieliu.art/). 


CON 318 633 
loackme. 


CON 319 634 
https://twitter.com/ 
Oivm. 


CON 320 635 
Antimodular Research 
/ Rafael Lozano- 
Hemmer’s studio / 
lozano-hemmer.com. 


CON 321 636 
Kristin Lucas. 


CON 322 637 
LUMEN, @ 
estudiolumen. 


CON 323 638 
MARIA MACIAK: 
MAMA, SOIL, AND 
SPIRIT mariamaciak. 
com. 


CON 324 639 
Organizado por Brian 
Mackern, Luisa Pereira 
y Daniel Argente. 


CON 325 640 
Nikki Makagiansar. 


CON 326 641 
makio1365. 


CON 327 642 
Maya Man, 
mayaontheinter.net, @ 
mayaontheinternet. 


CON 328 643 
Marcela Mancino // 
github: mardefronteira 
//ig: marcelamancino. 


CON 329 644 
manoloide.com. 


CON 330 645 
Vinicius Manrique. 


CON 331 646 
William Mapan — 
Generative 

Artist (tw: @ 
williamapan). 


CON 332 647 
Gus Marcos. 


CON 333 648 
VULB PA. 


CON 334 649 
Srdjan Markovic. 


CON 335 650 
Ricard Marxer/@ 
ricardmp. 


CON 336 651 
evelyn masso (@ 
outofambit). 


CON 337 652 
https://github.com/ 
matheplica. 


CON 338 653 
@MathMakesArt. 


CON 339 654 
@MattKaneArtist. 


CON 340 655 
Kyle McDonald 
@kcime. 


CON 341 656 
Nick Mcintyre. 


CON 342 657 
Joe McKay. 


CON 343 658 


Chandler McWilliams. 


CON 344 659 
Laleh Mehran. 


CON 345 660 
Jesal Mehta. 


CON 346 661 
Manu Mei-Singh, 
instagram handle: 
01.manu.01. 


CON 347 662 
Jerome MERCIER 
- pizza-punk. 
com - Twitter @ 
generativepunk. 


CON 348 663 
XU-@ 
fnXzxnweP6iZ|Un. 


CON 349 664 
Guinevere Mesh 
(thedigitalguin.com/@ 
thedigitalguin). 


CON 350 665 
Huw Messie - Textiles 
and New Media Artist 
- @huwmessie @ 
huwythechew. 


CON 351 666 
Sandro Miccoli(@ 
sandromiccoli/@ 
code2pixels_). 


CON 352 667 
Andrea Misuraca/@ 
instamisu. 


CON 353 668 
Congratulations 
Processing on your 
20th Anniversary! 

Many Thanks to 

the Processing 
Community! 
Processingis avery 
helpful tool for me to 
explore my interests in 
photography and the 
Arts. | have been using 
Processing since 2010 
starting with version 2. 
he improvements over 
the years have certainly 
helped expand the 
range of projects 
where | could apply 
Processing. | really 
enjoy writing code 
and Processing helps 
me satisfy my craving. 
started coding in 
963 beginning with 
FORTRAN using 
punched card input. 
hankfully we are 

much more productive 
today with the many 
tools we have like 
Processing. It helps 
that we can write code 
in Processing that runs 
on multiple hardware 
and software platforms. 
Andy Modla Software 
Engineer and 2D/3D 
Photographer Github: 
@ajavamind Blogs 

with some postings 


related to Processing: 


https://andymodla3dvr. 


blogspot.com/https:// 
andymodlaphoto 
graphy. blogspot. 
com/https:// 
reastudio2videogame. 
blogspot.com/ 
Instagram: @andy_ 
modla_photography @ 
tekla3d. 


CON 354 669 
mole’3. 


CON 355 670 
Stig Maller 

Hansen (@Stixan- 
stigmollerhansen.dk). 


CON 356 671 
aaron 
montoya-moraga. 


CON 357 672 
Harvey Moon and 
Qianqian Ye. 


CON 358 673 
Harvey Moon. 


CON 359 674 
Eduardo Morais. 


CON 360 675 
Ben Moren. 


CON 361 676 
Morpholux - Jean- 
Francois Renaud. 


CON 362 677 
mr_samfield. 


CON 363 678 
Ardak Mukanova 
https://www.behance. 
net/ardak_mukanova 


com/ardakmukanova. 


CON 364 679 
Siddhartha Mukherjee, 


com/decodingkunst. 


CON 365 680 
Siddhartha Mukherjee, 


com/decodingkunst 
(TU Delft). 


CON 366 681 
Donal Mulligan, @ 
donalmulligan. 


https://www.instagram. 


https://www.instagram. 


https://www.instagram. 


CON 367 682 
Jaime Munarriz. 


CON 368 683 
Musings with 

Code (Twitter: @ 
musingswithcode). 


CON 369 684 
name: Tatyana 
Mustakos - website: 
tademu.com - 
Instagram: @ 
poorly_documentedd. 


CON 370 685 
@nacho_cossio. 


CON 371 686 
@nagayama. 


CON 372 687 
Till Nagel (@tillnm) & 
Christopher Pietsch (@ 
chrispiecom). 


CON 373 688 
Agoston Nagy. 


CON 374 689 
Yota Nakamura 
(ohayota). 


CON 375 690 
204 (Minsang 
Namgoong)/ KAIST 
Es 7|ecste 
(Graduate School of 
Culture Technology, 
KAIST). 


CON 376 691 
Ram Narasimhan - 
github.com/Ram-N. 


CON 377 692 
Shefali Nayak [github @ 
shefalinayak]. 


CON 378 693 
RLBTA. 


CON 379 694 
NEORT. 


CON 380 695 
Nervous System @ 
nervous_system http:// 
Nervo.us. 


CON 381 696 
insta@newmiddleclass. 


CON 382 697 
nicolas_lebrun_@ 


twitter.com nclslbrn@ 
github.com nicolas- 
ebrun.fr. 


CON 383 698 
Electronics Engineer 
&& Data Scientist 
https://twitter.com/ 
nicolasbaez. 


CON 384 699 
https://www.instagram. 
com/no.fill_/. 


CON 385 700 
Noite de Processing 
https://garoa.net.br/wi 
ki/Noite_de_Processing. 


CON 386 701 
Widianto Nugroho, @ 
widiantonugroho 

(Instagram/GitHub). 


CON 387 702 
Kofi Oduro 
(Illestpreacha), 
Illestpreacha on all 
platforms and website: 
https://portfolio. 
illestpreacha.com/ 
links platforms website 


CON 388 703 
Old man but 
processing newbie. 


CON 389 704 
Krister Olsson + @ 
kristolsson (Twitter). 


CON 390 705 
Alex Olwal, www.olwal. 
com. 


CON 391 706 
Alex Olwal, Jon Moeller, 
Greg Priest-Dorman, 
Thad Starner, Ben 
Carroll, olwal.com/ 
iobraid. 


CON 392 707 
Takafumi Oyama, 
Experience Engineer. 


CON 393 708 
Christian Oyarzun Roa 
/ coyarzun@error404. 
cl/https://github.com/ 
coyarzun/. 


CON 394 709 
Zeynep Ozcan, @ 
ozeyna (instagram). 


CON 395 710 
@p1x3lboy. 


CON 396 711 
p1xelfool. 


CON 397 712 
p5.js website Japanese 
translation team. 


CON 398 713 
Dave Pagurek. 


CON 399 714 
Aamina Palmer, Artist- 
Designer, Instagram 
@dalaiami, amipalm. 
com. 


CON 400 715 
Priti Pandurangan. 
nstagram: priti.pg. 


CON 401 716 
Heracles 
Papatheodorou: 
@Arty2+https://heracl. 
es. 


CON 402 717 
Evolutionary System to 
Design Type — Jéssica 
Parente, University of 
Coimbra, CISUC, DEI. 


CON 403 718 
Devi Parikh. 


CON 404 719 
Name: Jeongho 

Park, Title: Scan 
Sequencer Javascript, 
Gitbug Source 

Code: https://github. 
com/jeonghopark/ 
scanseqjs, Twitter: 
https://twitter.com/ 
jeonghopark. 


CON 405 720 
Name: Joo Park; ig: @ 
joopark.jpg. 


CON 406 721 
Robin Parmar. 


CON 407 722 
Adriano Parracciani 
aka Cyberparra. 


CON 408 723 
Kate Parsons, 
Assistant Professor at 
Pepperdine University, 
Co-Founder at FLOAT. 


CON 409 724 
Student self-portraits 
rom the Computer 
Science for Designers 
& Artists course taught 
by Nikita Pashenkov at 
ArtCenter College of 
Design (2019 - 2021), 
tom top left to bottom 
right: E Jun An, Ivy Li, 
Max Wright, Chanmee 
Park, Yuheng Xie, 
Fulya Akoz, Christine 
Choi, Miles Ogden, 
Devin Fung, Mengshu 
Liu, Michael Tu, Taiga 
Haruyama, Monica 
Zhang, Monica Hwang, 
Gyu Hyung Kang, 
Ariana Pacino, Jaewoo 
Ma, Marianne Wellman, 
un Seok Lee, Zachary 
Fua, David Pentland, 
acqlin Ha, Benjamin 
Beserra, Boyuan 
Shi, Steven Mao, 
Humberto Rivera, Adhi 
Wonowidjojo, Christine 
Wei, Robin Keum, 
Hanyu Bao, Siladityaa 
Sharma. 


CON 410 725 
@patternseeing. 


CON 411 726 
Name: Mou Peijing 
Title: Fukushima 
Offset Social Media: 
@melodrama_yu 
Website: https://www. 
melodymou.com/. 


CON 412 727 
Aaron Penne (@ 
aaronpenne). 


CON 413 728 
Federico Pepe @ 
ledpep. 


CON 414 729 
PERLINDRAW (Paulo 
Costa - NAVAX) - 
https://www.facebook. 
com/processingsp. 


CON 415 730 
Phoenix Perry. 


CON 416 731 
Niklas Peters. 


CON 417 732 
Kyle Phillips. 


CON 418 733 
Noah Travis Phillips 
(.com)/@th3n04h. 


CON 419 734 
my github: https:// 
github.com/ 
PhotonNikko. 


CON 420 735 
Gonzalo Piérola 
Azanza. 


CON 421 736 
Pitheorem [Pedram 
Sadeghbeyki]. 


CON 422 737 
Matthew 
Plummer-Fernandez. 


CON 423 738 
Stéphane Pogran, 
https://www.instagram. 
com/stephanepogran/. 


CON 424 739 
Niels NTG Poldervaart. 


CON 425 740 
Juan Carlos Ponce 
Campuzano, @ 
jcponcemath. 


CON 426 741 
Onthe importance 
of words, Panayota 
Pouliou @pitsypeach. 


CON 427 742 
H.Prakash (Blogger, 
Animator, Geek), 
moarpixels.tumblr.com, 
witter/Instagram:@ 
prakashph. 


CON 428 743 
Process - www. 
process.studio (Martin 
Grédl, Moritz Resl). 


CON 429 744 
Processing Buenos 
Aires - Argentina 
2014-2015). 


CON 430 745 
Processing Paris. 


CON 431 746 
James Proctor @jprctr. 


CON 432 747 
George Profenza, @ 
orgicus. 


CON 433 748 
Martin Prout aka 
monkstone/@ 
monkstoneT. 


CON 434 749 
Iris Qu(instagram: 
iris_xiaoyu). 


CON 435 750 


Achilleas Rachoutis ig: 


achilleas_rach. 


CON 436 751 
Daniel Raedel, PsyD. 


CON 437 752 
Fernanda Ramos, 
visual artist, www. 
fernandaramos.com. 


CON 438 753 
Oz Ramos. 


CON 439 754 
@randOmwalk; 
williamlockett.org. 


CON 440 755 
randomseed.cargo. 
site. 


CON 441 756 
Tiemen Rapati (@ 
rapatski) / United 
Visual Artists. 


CON 442 157 
Rasagy/@ 
data.n.coded. 


CON 443 758 
Fabin Rasheed | www. 
nurecas.com | twitter. 
com/fabinrasheed. 


CON 444 759 
@REAS. 


CON 445 760 
Andreas Refsgaard, 
https://twitter.com/ 
AndreasRef, https:// 
www.instagram.com/ 
andreasref/. 


CON 446 761 
Chris Reilly. 


CON 447 762 
@reona396. 


CON 448 763 
Moritz Resl, Paul 
Sommersguter. 


CON 449 764 
N.Restelli. 


CON 450 765 
Everardo Reyes. 


CON 45 766 
tich.gg/ Digital 
Architect. 


CON 452 767 
Matt Richard, Wings, 
@isocor. 


CON 453 768 
Roland Richter. 


CON 454 769 
Concept and 
research: Renée 
Ridgway, Data 
visualisations: 
Richard Vijgen. 


CON 455 770 
Chris Ried / Twitter: @ 
generatecoll. 


CON 456 771 


Frederik Riedel, https:// 


riedel.wtf. 


CON 457 772 
“Anamika’” - Rishi 
(@DenisovichPy). 


CON 458 773 
@robotandproud. 


CON 459 774 
/Catia Roga. 


CON 460 775 
Tim Rodenbroker, 
timrodenbroeker. 
de. 


CON 461 776 
Nikita Rokotyan. 


CON 462 777 
Angela Rong, 
https://github.com/ 
togekisse. 


CON 463 778 
h. scott roth, 
Twitter: hscottroth. 


CON 464 779 
A. Rothaug. 


CON 465 780 
Rebecca Ruige Xu, 
Sean Zhai. 


CON 466 781 
Lucrezia Russo/ 
|G: @lucreziarusso. 


CON 467 782 
Soundbird (2008) by rux 
Rui Pereira) 
@rux_twitts_here. 


CON 468 783 
RVig, Generative Artist, 
@rvig_art. 


CON 469 784 
om-Lucas Sager 
witter @t0Omay 
nstagram @tlsaeger. 


CON 470 785 
Ashna Sahir. 


CON 471 786 
Santino Santos 
(Instagram/ 

Twitter handles = 
samoandrop123). 


CON 472 787 
@sarah_ridgley. 


CON 473 788 
Emi Sato, Designer, 
emi-sato.com, 
@emisato02. 


CON 474 789 
Takayuki Sato (@ 
takayukisato624). 


CON 475 790 
Lasse Scherffig. 


CON 476 791 
Mark Schifferli. 


CON 477 792 
Andreas Schlegel 
@sojamo, 

ControlP5. 


CON 478 793 
Andreas Schlegel 
@sojamo and Brian 
O'Reilly. 


CON 479 794 
Jim Schmitz. 


CON 480 795 
Johanna Schneider. 


CON 481 796 
Derrick Schultz 

(IG: @dvsmethid, 
Twitter: @dvsch). 


CON 482 797 
Marcel Schwittlick. 


CON 483 798 
eric socolofsky 
(@ericsoco). 


CON 484 799 
Chris Sears. 


CON 485 800 
phil-seaton.com/. 


CON 486 801 
Senbaku. 


CON 487 802 
Instagram - @ 
senseiwhocodes. 


CON 488 803 
James Jung-Hoon Seo 
(@lossless). 


CON 489 804 
Gerard Serra. 


CON 490 805 
Ayush Sharma, 
Engineer (github: 
@a-y-u-s-h, twitter: 
@taggosaurus). 


CON 491 806 
Jianan Shi, UCL 
student @interactive 
architecturelab, ins@ 
sigua2021. 


CON 492 807 
Yining Shi, https:// 
twitter.com/yining_shi. 


CON 493 808 
Yujing Shi(https:// 
yujingsss.github.io/ 
yis/). 


CON 494 809 
Munus Shih, Design/ 
Coder, https:// 
munusshih.cargo.site. 


CON 495 810 
Shervin Shirmohamadi, 
Undergraduate 
student Mechanical 
Engineering , Sbu, Iran 
/(my instagram link )( 
https://www.instagram. 
com/shervin. 
shirmohamadi/). 


CON 496 811 
www.patshiu.com. 


CON 497 812 
Neel Shivdasani (@neel. 
shivdasani). 


CON 498 813 
Shubhang-sharma. 


CON 499 814 
Hisatomi Shuji 
(instagram: 
@shuji15.904). 


CON 500 815 
Takawo Shunsuke. 


CON 501 816 
Aaron Siegel, 
datadreamer.com. 


CON 502 817 

vladimir sierra https:// 
www.instagram.com/ 
plutovman. 


CON 503 818 
Carrie Sijia Wang, 
Artist/Designer/ 
Educator, Instagram: 
carrie_re7l, 


CON 504 819 
Sinan from 
OpenProcessing. 


CON 505 820 
Kevin Siwoff. 


CON 506 821 
Julio Smitter/ JSF. 


CON 507 822 
Sofia S.G. a.k.a. Sofia 
Rossi Torres a.k.a. 
sofurby. 


CON 508 823 
Name: Gaurav Sohani, 
Github: scorpiyogi, 
Twitter: scorpiyogil. 


CON 509 824 
Lex Sokolin, Artist, 
https://twitter.com/ 
UAesthete. 


CON 510 825 
Joan Soler-Adillon. 


CON 511 826 
KT Son @4praktice. 


CON 512 827 
Winnie Soon & Geoff 
Cox, Aesthetic 
Programming, 


www.aesthetic- 
programming.net. 


CON 513 828 
Marcelo Soria- 
Rodriguez, @msoriaro. 


CON 514 829 
So Sun, My Journey 
with P§js , instagram 
@sosunnyproject , 
youtube.com/ 
sosunnyproject. 


CON 515 830 
@spacepolygon. 


CON 516 831 
https://www. 
instagram.com/ 
spaghetticoder77/. 


CON 517 832 
Barry Spencer @ 
speculatype. 


CON 518 833 
@spoonrider. 


CON 519 834 
Starkeffect (Twitter: @ 
starkeffectart, IG: @ 
starkeffect). 


CON 520 835 
Amanda Stojanov. 


CON 521 836 
Sumit_Saini https:// 
github.com/sumqwerty. 


CON 522 837 
Alida Sun all social: 
@alidasun linktr.ee/ 
alidasun. 


CON 523 838 
Tim Sun. 


CON 524 839 
Maks Surguy (@ 
msurguy). 


CON 525 840 
Crosser, rewritten in 
P5,js and Play by the 
SWEAT Collaborative. 


CON 526 841 
Artist: TuangT, Insta- 
gram: @TuangStudio. 


CON 527 842 
Daniele Tabellini @ 
fupete. 


CON 528 843 
tabreturn.com. 


CON 529 844 
Taiwan Contemporary 
Culture Lab (C-LAB). 


CON 530 845 
Muhammed Takriti. 
Entrepreneur, 
generative art coder. 


CON 531 846 
Jared S Tarbell. 


CON 532 847 
Izza Tariq, Software 
Engineer, LinkedIn 
(www.linkedin.com/in/ 
izza-tariq-707181b2/), 
GitHub (https://github. 
com/lzzai1). 


CON 533 848 
@tasty_plots. 


CON 534 849 
Instagram: @ 
tathagatparihar. 


CON 535 850 
Scott Tatsuta. 


CON 536 851 
he Coding Train. 


CON 537 852 
he funprogramming. 
org community + Abe 
Pazos. 


CON 538 853 
he Realitat Team (MX). 


CON 539 854 
Richard The (he/him) 
Studio TheGreenEy| 
Parsons School of 
Design. 


CON 540 855 
Various projects 
created by Studio 
heGreenEyl where 
Processing or P5 were 
used inthe process. 
www.thegreeneyl.com. 


CON 541 856 
Echo Theohar, @eskyet. 


CON 542 857 
Nic Thibodeaux 
(Twitter: @nicthibs, @ 
ConwaysCorridor). 


CON 543 858 
jesse c thompson. 


CON 544 859 
Ryan Thompson - 
(Twitter) @RT_Artwork 

-www.ryanthompson. 
name. 


CON 545 860 
Chelsea Thompto - 
Assistant Professor of 
Digital Media Art at San 
José State University. 
https://github.com/ 
cthompto. 


CON 546 861 
Nicolas Tilly. 


CON 547 862 
Woodcut Flow by Jason 
ing (instagram.com/ 
jzlabs). 


CON 548 863 
iny Tech Zines. 


CON 549 864 
3258 3B (Kahata Toru) 
/Sci-FiWriter/@ 
Hodler_SciFi. 


CON 550 865 
Nitcha Tothong, 
nterdisciplinary 
Artist and Designer, @ 
nitchafame, https:// 
www.nitcha.info/. 


CON 551 866 
@toxi. 


CON 552 867 
Anya Tran and Lily Zhou. 


CON 553 868 
Amy Traylor (Mom, 
Artist, Teacher, Coder). 


CON 554 869 
Lee Tusman. 


CON 555 870 
USC IML3008400. 


CON 556 871 
Niels V.. 


CON 557 872 
Jakub Valtar. 


CON 558 873 
Vamoss - https:// 
vamoss.com.br. 


CON 559 874 
Frederik Vanhoutte (@ 
whblut). 


CON 560 875 
@variable_j. 


CON 561 876 
Roopa Vasudevan, 
media artist & 
researcher // @rouxpz. 


CON 562 877 
Iskra Velitchkova. 


CON 563 878 
Sergio Venancio. 


CON 564 879 
Marta Verde. 
Personal website: 
www.martaverde. 
net Instagram: @ 
martaverdebaqueiro. 


CON 565 880 
Jeroen Verschuren - 
www.seads.nework. 


CON 566 881 
Jeroen Vesseur. 


CON 567 882 
José Vicente Aratijo/ 
DUNADIGITAL.com. 


CON 568 883 
Sai Ram Ved V(@ 
sairamved). 


CON 569 884 
Santi Vilanova - 
Playmodes Studio. 


CON 570 885 
Alexandre Villares, 
André Burnier, 
Bernardo Fontes, 
Barbara Castro, Carlos 
de Oliveira, Guilherme 
Vieira, Helena Sulzbeck, 
Monica Rizzolli, Paulo 
Costa, Rodrigo 
Junqueira, Victoria 
Pianca, Vinicius Padilha. 


CON §71 886 
Alexandre BA 
Villares https://abav. 
lugaralgum.com. 


CON 572 887 
Kawandeep Virdee, @ 
whichlight, whichlight. 
com. 


CON 573 888 
viak.xyz. 


CON 574 889 
Simon Wainwright. 


CON 575 890 
Name: Henry Haoyu 
Wang Title: artist/ 
creative technologist 


Github: https://github. 


com/henrywang95 
Instagram: 
henryiswhy. 


CON 576 891 
Doeke Wartena, www. 
doekewartena.nl. 


CON 577 892 
Marius Watz @ 
mariuswatz. 


CON 578 893 
Mark Webster. 


CON 579 894 
Chris Welch - @ 
chriswelch_72. 


CON 580 895 
Dave Whyte @ 
beesandbombs. 


CON 581 896 
David Wicks @ 
sansumbrella. 


CON 582 897 
@williamngan. 


CON 583 898 
Amelia 
Winger-Bearskin. 


CON 584 899 
Leisure Wolf. 


CON 585 900 


Mike Wong (@artixels). 


CON 586 901 
Professor Danne 
Woo/ Queens 
College, CUNY 
/creativecode. 
dannewoo.com. 


CON 587 902 
Kirk Woolford ( 


https://b.bhaptic.net). 


CON 588 903 
Kevin Workman - 
HappyCoding.io. 


CON 589 904 
Andrew J Wright | @ 
concept_blend. 


CON 590 905 
Kuan-Ju Wu. 


CON 591 906 
Copyright: XIY lab - 
Open Source project - 
development team: 
Stefano Adamo, 
Eugenio Battaglia, 
Danilo Di Cuia, Alessio 
Erioli, Nicold Loprieno, 
Giulia Marzin, Piero 
Molino, Michele 
Pastore, Leonardo 
Romei, Matteo 
Stefanielli, Antonio 
Vergari. Year: 2014 (July 
15-31) Link: https:// 
www.co-de-it.com/ 
open-source-neural- 
headset-development. 
html - code: https:// 
bitbucket.org/ddicuia/ 
openeeg/src/master/. 


CON 592 907 
Emily Xie, Generative 
Artist. @emilyxxie. 


CON 593 908 
@xrispy. 


CON 594 909 
Shuyu Xu. 


CON 595 910 
Masaki Yamabe, Data 
Visualization Designer, 
@masakick. 


CON 596 911 
ins:@yaogeeziyii. 


CON 597 912 
Yazid, Generative Artist, 
@Yazid (Twitter). 


CON 598 913 
Qianqian Ye. 


CON 599 914 
PCD Shanghai, 
organized by Qiangian 
Ye, Chang Liu, and 
Yuli Cai. 


CON 600 915 
Title: Processing 
Foundation 2020 
Project “p5 for 50+”, 
and “50+ Coding Club 


Workshop series” 
Project Link: https:// 
pdfor50.plus | Project 
Lead: Inhwa Yeom, 
Seonghyeon Kim | 
Mentor: Qiangian 

Ye Advisor: Lauren 
McCarthy | Project 
Sponsor: Processing 
Foundation |Workshop 
Lead: Inhwa Yeom| 
Workshop Organizer 
& Planner: Sun Lee 
(Curator, Lee Kang 
Ha Arts Museum) | 
Workshop Teaching 
Assistant: Cholmin 
Kang |Workshop 
Sponsor: Asia Culture 
Center(ACC), Gwangju, 
South Korea. 


CON 601 916 
itle: Google Summer 
of Code 2020 Project 
p5 for 50+ teaching” | 
Student Developer: 
nhwa Yeom | Mentor: 
Qiangian Ye | Hosted by 
Processing Foundation 
Funded by Google| 
Page Link: https://p5js. 
org/teach | GitHub 

Link: https://github. 
com/processing/p5,js/ 
blob/main/contributor_ 
docs/project_wrapups/ 
inhwayeom_ 
gsoc_2020.md. 


CON 602 917 
Tyler Yin. 


CON 603 918 
Logan K. Young. 


CON 604 919 
Z1 studio (P5) and 
neoneo (Graphic 
Design). 


CON 605 920 
Ksen Zero (http:// 
xnze.ro; |G: @xn_ze_ 
ro)-allimages from 
publicly-available 
sketches on https:// 
openprocessing.org/ 
class/70239. 


CON 606 921 
Wenran ZHAO is an 
artist who focuses on 
code art, 3D animation, 
painting and street art. 


CON 607 922 
Yufeng Zhao; once 
upon atime; github: 
yz3440; ig: hallucitalgia. 


CON 608 923 
Annie Zheng. 


CON 609 924 
Yayuan Joyce Zheng| 
Experience Designer | 
ins:@joyceiszyy. 


CON 610 925 
Lingyi Zhou. 


CON 611 926 
Name: Yiging Zhou. 


CON 612 927 
Jan Zizka, Alex Olwal, 
Ramesh Raskar, olwal. 
com/specklesense. 


CON 613 928 
Michael Zoellner / 
#emnullfuenf. 


CON 614 929 
Mattia Zucchelli. 


CON 615 930 
Nolan Zurek. 


CON 616 931 
Anonymous. 
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